This is NOT free software. You are hereby licensed to use this software for evaluation purposes without charge for a period of 14 (fourteen) days, counting from the day you download this software.

If you use this software after the 14 day evaluation period a registration fee is required. Unregistered use of <Live Markup> after the 14-day evaluation period is in violation of U.S. and International Copyright Laws.

Register <Live Markup>PRO...

Registration simple, fast -- only US$ 49

General Information

What exactly is it?

How to contact MySoftware Company.

Mailbot for Registered users.

License Agreement

Working with <Live Markup>

Getting Started

Opening HTML document

DRAG and Drop

Opening an existing Text File

Building New HTML document

Head element information

Document Title

Comments Head/Body

Element Selectors

Delete/unDelete elements

Adding Text and Images

Header Level H1 - H6

Changing text to Bold etc.

Font Size change (Netscape)

Paragraph tag

Line Break tag

Autowrap & Autoflow

Inserting Images in documents

Horizontal Rule and its attributes

Centering Text or Images

Blockquote -- extended quote

Preformatted Text

Raw Text element

Address tag

Inserting Background Image

Background, Link & Blink color changes

Blink -- yes, we support it :-)

Options Menu set-up

Working with Lists

Different Lists

List Menu selections

Building List

Exit List

Insert Paragraph

Nested List

Headline in List

Actvating List elements

URL - Creating Hyperlinks

Hyperlinks from Text or Images

Absolute versus Relative URLs

Hyperlink Property Sheet

Delete/Edit Hyperlink

Building Name link

Relative Links in Image Maps

Working with Images

Placing Images in your document

Cant find my Image

Image Information Window

Size Image on-screen

Virtual Keyboard

Special Characters in HTML

iso8859-1 table

Building Forms

Can I create my own Form

READ - Form Tags explained

Building Forms with LMP

How to make a INPUT text element

How to Add/Edit Form elements

How to make a TextArea Form element

How to make a Checkbox

How to make a Radio button

How to make a Select Form

How to make a Submit/Reset button

Submitting Forms

Hidden Field

Building Tables

The Table tags explained

The Table Attributes

Working with Tables

Inserting a NEW Table

Deleting a Table row

Deleting a Table cell

Adding a caption to a Table

Image Maps

Netscapes Client Side Image Maps

Available very soon

Learning HTML...

URLs for learning

HTML

INFORMATION PROVIDED IN THIS DOCUMENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND FREEDOM FROM INFRINGEMENT.

The user assumes the entire risk as to the accuracy and the use of this document. This document may NOT be copied or distributed in any form, printed or electronic.

<Live Markup> is a Trademark of MySoftware Company

Copyright (c) 1996 MySoftware Company. All Rights Reserved.


What exactly is it?

<Live Markup> is a colt in a new breed of powerful, WYSIWYG HTML editors that now

set the trend for Web Development, owing to their ease of use, and their dexterity.

An original concept from MediaTech Inc., purchased and marketed by MySoftware

Company, Palo Alto CA. <Live Markup> offers complete creative control of HTML

documents, allowing you to create complicated and fascinating layouts at adrenaline

pumping, full-throttled speed.

Purists will argue that 'What-You-See-Is-What-You-Get' (WYSIWYG) HTML editors are

actually impossibilities, due to the difference in tag interpretation of browsers. They're

right. But <Live Markup> comes as close as possible, modeling tag interpretation after

the two most popular browsers available - Netscape and Mosaic.

<Live Markup> is under constant development, day after day as MySoftwares 	programmers refine the program and extricate bugs. The program is a

product of MySoftware Company, a trend-setting company based in Palo Alto, 	California. The program was developed using Borland C++ 4.5. and OWL.

You can contact us in one of the following ways:

Contact:	Peter F. Moeritz

Email:	peter@mediatec.com

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Mail:	Live Markup Department

MySoftware Company

2197 East Bayshore Road

Palo Alto, CA 94303

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Fax:	216-526-5985

Tel:	216-526-6788

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

URL:	http://www.mediatec.com

FTP:	ftp.mediatec.com/pub/mediatech

Mailbot for Registered users...

For all registered users we a mailbot available. What is it? Automatic information without human interference. Its fast and very simple to use.

Automatic Document and Information Mailbot:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

To get the latest <Live Markup> News send EMAIL to our mailbot:

EMAIL To:	For registered users only

SUBJECT:	For registered users only

Message:	For registered users only

The Document brings you the latest LIVE MARKUP INFORMATION and has a DIRECTORY for other documents you can retrieve.


Getting Started

HTML -- Authoring for the Web

An HTML document is an ASII text file that contains embedded HTML tags. HTML tags are encapsulated within the less-tan (<) and greater-than (>) brackets. Some of the tags can stand by themselves -- standalone tags, like <tag>. Other tags are used in pairs. The beginning tag tells the Web browser to start the tag function and the ending tag tells the Web browser to stop. The ending tag has a forward slash (/) at the beginning of the tag, like </tag>. The syntax is: <tag> type </tag>

Authoring with <Live Markup>

First things first. Like all effective Windows programs, <Live Markup> has a quick access toolbar that makes HTML element insertion an absolute breeze.

 Opening An Existing HTML Document.

You can open an existing HTML document by clicking on the open button, or the more conventional method of choosing File|Open. This brings up the standard windows dialog box of files and directories. Choose the file you want to open, and either double click on it, or click on it once and press the OK button.

Be aware that if you open a document NOT created in <Live Markup>, the program automatically formats all recognized tags in WYSIWYG format, and displays all unrecognized tags as raw text elements (black type in a white background).

 DRAG & DROP -- open HTML Document.

You can open an existing HTML document simply by DRAGGING any HTML file from File Manager and DROPPING it in the open <Live Markup> document main window.

Using Windows 3.1 you can also drop the file directly on the minimized Icon. (This does not work under Windows95 -- if you dont like it call Microsoft).

Opening An Existing Text (*.txt) File.

You can also open existing text files (must have a txt ending). Go to File|Open, in the windows dialog box under File Name change the *.htm ending to *.txt, now browse to the text file you want to open in <Live Markup>. The file opens by placing all paragraphs in elements ready for further editing.  To save the file as html, go under the file menu to save as make sure html is selected.

 Creating New Documents...

 Click on the New Document button on the toolbar, or from the File menu choose FILE|NEW.

This now opens up a new document window with the default gray background. To change the background color, choose Options|Colors|Background, and then specify the color you want to use in the clickable palette. It's as simple as that. However, we recommend to NOT change the background color until all text input is completed -- for better viewing.

Head element information...

Remember to click on the Document Information button, to input your title of the Document and other attributes now!

Document Information input in the <Live Markup> HEAD element should only contain information ABOUT the document. Remember: All displayable elements should be within the content of the BODY.

Click on the "edit document properties" button in the toolbar, or select OPTIONS|EDIT DOCUMENT PROPERTIES. A new window opens, allowing three(3) different inputs.

DOCUMENT TITLE...

Each HTML document needs a title. You can only have one title for each document, containing only plain TEXT, no HTML tags. Pick a title which is short and descriptive of the actual documents information. Remember, many browsers place the title in the title bar -- the total length of getting the information out should be considered.

TITLE...

1.	type the document title. This information is embedded in the header. The TITLE is not

part of the document text (It is NOT automatically the document file name).

2.	Often the title is used by a browser to label the display window. Some Web "Search

Engines" only search the title of Web pages for indexing. Therefore, the text of the

title should be kept short but sufficient to identify the document.

OTHER HEAD ELEMENTS...

The META element is used within the HEAD element to embed document meta

information not defined by other HTML elements. Such information may be extracted

by servers and/or browsers. If you want META information in your document, you will

need to type it in the format below.

Here are some suggested META head elements...

<META NAME="AUTHOR" CONTENT="author name">

<META NAME="ORG" CONTENT="author org">

<META NAME="FILE NAME" CONTENT="Document ID number">

<META NAME="EXPIRES" CONTENT="Expiration Date">

<META NAME="BUILD" CONTENT="Creation Date">

<META NAME="SUBJECT" CONTENT="Subject">

<META NAME="KEYWORDS" CONTENT="key1, key2, key3">

<META NAME="VERSION" CONTENT="Document Version">

BODY ATTRIBUTES...

Attributes used by Netscape and other browsers

may be inserted here.

LINK... <LINK REV=OWNER HREF=internet-address>

The <LINK> standalone tag is used in a special way to identify the email address of

the document owner. This information is NOT displayed by the Web browser, but is

used by some browsers when sending a email message to the documents owner.

Comments...<!- this is a comment ->

You can place comment in the document to describe the HTML document or to give some kind of indication of the status of the document. Text in comments is ignored when the HTML file is parsed. Comments do NOT show up on the screen

Comments may be placed in the Header or Body of the HTML document.

Here is a Comment:

<!- Tell a friend about Live Markup ->

To place a Comment in the Header...

1.	Click on Options|Edit document properties  from the pull down menu, or click on the

Edit document properties button in the toolbar.

2.	Type the comment in the Other Head Elements window like this:

<!- Tell a friend about Live Markup ->

To place a Comment in the Body of a document...

1.	Click on the raw text button in the toolbar, or from the pulldown menu select

Insert|Raw text field.

2.	Type the comment in the raw text element

<!- Tell a friend about Live Markup ->

Remember: Any body comment will always be displayed in <Live Markup> in a raw

text element.

What are Elements Selectors?

<Live Markup> is working with element selectors to structure any document. Each button on the toolbar places the appropriate element in the document you are building.

Element selectors have several functions:

1.	Clicking anywhere within the document, brings the particular element in FOCUS

within the area you clicked on. This can be a single line, a nested list or the complete

document.

Always check the status line on the bottom of the file window, it describes

the element you selected, or are working in.

2.	If you click on the element with your LEFT mouse button once, it raises the

element visually and activates it for editing -- puts it in FOCUS.

3.	Clicking on the element with your RIGHT mouse button displays a pop

up a menu or Property Sheet, that allows selection of different attributes, and

settings for that particular element's content.

To further show you the functions of in FOCUS elements and how they look and work,load the document SAMPLE.HTM file now. -- REMEMBER: <Live Markup> uses LEFT and RIGHT mouse clicks on element selectors.

Some facts about Elements.

 The element increases in size, as the active element uses more lines.

 DO NOT COPY a whole document of plain text in only ONE Element. However, you may copy paragraphs of text in individual (separate) text elements.

 To edit a particular element, activate by clicking on it with your left mouse button.

 To insert a single element between two existing elements, activate the element just ABOVE the point of insertion, and then click on one of the element insertion buttons on the Toolbar.

 From within just about ANY ELEMENT SELECTOR key ALT|ENTER together This opens the PROPERTY SHEET (menu) for this particular element -- usually connected with a HELP button for this topic.

To insert an element at the very TOP of an existing document, click on the top of the document, just above the very first element. Then, click on one of the element insertion buttons. This makes your new element the very first in the document.

Deleting Whole Elements...

Deleting a particular element is done by clicking with the RIGHT mouse button on the element, and then choosing 'Delete this element' from the pop-up menu displayed.

Undele Whole Element...

To undete the whole element just deleted. Select from the pulldown menu EDIT|UNDO, or click on the green reverses the last operation button in the toolbar.

Adding Text, Graphics, and other Elements.

 Adding Text To Your Documents...

Just click on this toolbar button to start a new text element. You must also first click on the text element button to insert a image. All normal text for the browser's proportional font is entered in this element.

NOTE: This button is always used, to start a new text and image element.

We recommend to save the file you are working on -- often. To save a file into HTML format, simply click on the ""Save this document button or from the FILE menu click on SAVE or SAVE AS.

Headers -- H1 to H6...

 The <H1>text</H1> header level tag pair indicates a level of structure in your document. There are six Header levels <sizes) to choose from, with H1 displaying the largest type. Headers like paragraphs autowrap if the phrase cannot fit on a single line. All Header tags also force paragraph breaks before and after the header.

It is suggested to use headings hierarchically, starting your document with a first level heading and to use headings in order. Unlike titles, headings can have a unlimited amount of text. Of course having lines and lines of large text looks totally stupid.

1.	Insert a Header...

Click on the Header button in the toolbar, or INSERT|HEADER from the pulldown

menu, a new header element inserts in the document ready for type input -- header

size set to the largest size -- H1.

2.	Changing Header SIZE...

To change the header to any other header size, click with your RIGHT mouse button

on the header element and choose from the pop-up menu the wanted size.

Here is a very simple way: If the Header element is in FOCUS, key

ALT|ENTER together. The Header Property Sheet opens for all the different

Header attribute selection. (Remember: ALT|ENTER works for any element)

3.	Changing Headers to NORMAL type...

Click with your RIGHT mouse button on the header element and choose from the

pop-up menu PLAIN TEXT.

4.	CENTER/unCENTER Headers...

Click with your RIGHT mouse button on the header element and choose from the

pop-up menu CENTER. To bring it back to the default left alignment position, select

CENTER again.

5.	DELETING Headers to normal type...

Click with your RIGHT mouse button on the header element and choose from the

pop-up menu PLAIN TEXT.

Header names should be appropriate to the following section of the document, while the title should cover the document as a whole. There are no restrictions on the sequence of headers, e.g. you could use a level three header following a level one.

header

Changing text styles...

Character style tags affect words or characters within other HTML entities and have the effect of changing the appearance of that text so that it somehow differs from the surrounding text. There are two kinds of tags used.

1.	Logical style. The tags are named after the way they are used for emphasis, citation

etc. Logical styles do not indicate the type of formatting the browser should do for that

text, they only imply that some kind of emphasis should take place -- every browser

will show this somewhat different.

2.	Physical Style. Physical style tags change the actual presentation style of the text --

to make it bold, italic or monospaced.(typewriter font).

Regardless of what you select, the final outcome is browser dependent. In the final document text tagged for bold-italic may only end up one or the other.

Here is how to change text styles with <Live Markup>:

1.	Highlight the text you want to change.

2.	Single click with your RIGHT mouse button anywhere in the highlighted text.

3.	From the pop-up menu select the style you want - the text changes instantly to the

selected choice.

Change any text back to plain

Any text may be changed back to plain again

1.	Highlight the text you want to change (you can be overlapping plain text)

2.	Single click with your RIGHT mouse button anywhere in the highlighted text.

3.	From the pop-up menu select -- PLAIN

Font size changes...

Whole paragraphs or individual letters may be changed. Remember, this is only valid with the Netscape browser.

1.	Highlight the text you want to change. (You may highlight more than one location)

2.	Click on the Font Size drop down menu in the toolbar and select a number from 1-7

3.	Click with your RIGHT mouse button anywhere in the highlighted text.

4.	In the pop-up menu select under Font size: absolute, +relative or -relative -- see

Netscapes documentation for the proper use.

Valid values range from 1-7. The default font size is 3. The value given to size can optionally

have a '+' or '-' character in front of it to specify that it is relative the document BASEFONT.

The default BASEFONT is 3, and can be changed with the BASEFONT element.

 < BASEFONT SIZE=value> This changes the size of the BASEFONT that all relative font

changes are based on. It defaults to 3, and has a valid range of 1-7.

Paragraphs in HTML...

Adding ordinary paragraphs with <Live Markup> is very simple. However, first a word about the <P> tag. HTML 1 specified the <P> tag as one sided, no closing tag. In the HTML 2 and HTML 3 specifications the paragraph tag has been revised. In these versions the paragraph tag is two sided <P></P> where the closing tag is optional.

<Live Markup> uses the newer version <P> text </P> for paragraphs. Most if not ALL browsers will accept the new version without problems.

Line Break...

The <BR> tag, with no closing tag, when placed on the end of a line of text, breaks the line at that point. When a Web browser encounters a <BR> tag, it restarts the text after the tag at the left margin on the next line. You can also use the <BR> tag within paragraphs or list items. <BR> will not add extra space above or below the new line -- all it does, it starts a new line.

1.	To place a break in your document, at any position -- press the ENTER key, a

ARROW linebreak indicator is visable in the document.

2.	Double click on the actual ARROW to open the End of line Property Sheet for

posible <BR> editing.

What is Autowrap and Autoflowing?

The Web browser flows all the contents of a paragraph of text together from left to right and from top to bottom according to the current window and display size. This is called autofowing.

The Web browser wraps anything that does not fit on the current line, placing it on the next line. For example, a paragraph that displays four lines long on an 8-inch wide window rewraps to about eight lines it the user re-sizes the window to about half the current size. That is autowrapping.

Remember: Your document will be read by many different browsers. Just because a line breaks at a certain point with one browser does not meant it will happen in the same place with other browsers. The only thing for sure is, that everything flows from left to right and top to bottom.

Inserting Images in Documents...

 First  a text element has to be inserted. (This is always the first step)

 Then click on the Image insertion button on the toolbar. Now the Image

smiley face is inserted next to the text element.

Double click with your left mouse button directly on the smiley face. Now the Image Property Sheet opens. This Property Sheet is design for just about any imaginable image attribute possible. (Many available attributes are specific to the Netscape Browser).

a.)	ALIGNMENT -- As soon as the Image Property Sheet opens -- tell <Live Markup> what

image ALIGNMENT you want -- NONE is default left. See Working with Images.

b.)	ALT TEXT -- Click on the ALT TEXT tab and type in the Alternative Text window any

description of the image for the unlucky) people who have no graphical browsers, and use

text only programs, such as Lynx.

c.)	Image URL -- Click on the Image URL tab and tell <Live Markup> where the image

is located. See URL Creating Hyperlinks.

We suggest to  visit The Netscape site to learn about the meaning of all the attributes. It will help you to build better looking Web Pages.

NOTE: Presently, <Live Markup> does not display many of the various different text alignments possible. However, all the proper tags are inserted for display with the Netscape browser. (The display in <Live Markup> will change in the future).

You may bring the Image Property Sheet up anytime, by simply double clicking on any image.

Inserting a Horizontal Rule...

 Click on the horizontal rule button in the toolbar, or INSERT|HORIZONTAL RULE from the pulldown menu. This insert a Horizontal rule anywhere into the document at any time. Just make sure that the "selector is FOCUSED above the element you want to insert a horizontal rule.

Changing the Horizontal Rule -- features build in Netscape:

a.)	Double click anywhere directly on a already inserted horizontal rule -- now, the

Horizontal Rule attribute window up. Here is a example:

SIZE:             2 (enter the number two)

WIDTH:         70 (enter the number seventy, then click on Percent)

ALIGNMENT: (click on CENTER)

SHADING:     (click on NO SHADE) Then click on OK

Here is the attribute you created with the 5 simple inputs:

<HR SIZE = "2" WIDTH = "70%" ALIGN = "CENTER" NOSHADE>

This is Netscapes explanation: The HR element specifies that a horizontal rule of some sort (The default being a shaded engraved line) be drawn across the page. To this element we have added 4 new tags to allow the document author some ability to describe how the horizontal rule should look. <HR SIZE=number> The SIZE tag lets the author give an indication of how thick they wish the horizontal rule to be. <HR WIDTH=number|percent> The default horizontal rule is always as wide as the page. With the WIDTH tag, the author can specify an exact width in pixels, or a relative width measured in percent of document width. <HR ALIGN=left|right|center> Now that horizontal rules do not have to be the width of the page we need to allow the author to specify whether they should be pushed up against the left margin, the right margin, or centered in the page. <HR NOSHADE> Finally, for those times when you really want a solid bar, the NOSHADE tag lets you specify that you do not want any fancy shading of your horizontal rule.

CENTER Text or Images...

Yes you can center your text. All lines of text between the begin and end of CENTER are centered between the current left and right margins. A new tag has been introduced rather than using the proposed <P Align="center"> because using <P Align="center"> breaks many existing browsers when the <P> tag is used as a container. The <P Align="center"> tag is also less general and does not support all cases where centering may be desired. (Netscape explanation).

Here is how you use the centering feature in <Live Markup>:

1.	Click with your RIGHT mouse button anywhere, within any selector.

2.	Select center from the pop up menu

3.	All TEXT or IMAGE within this selector is centered and the proper tags inserted.

To un-center select center again from the pop-up menu.

Quotations...<BLOCKQUOTE>

The Extended Quotation or <Blockquote> dual </Blockquote> tag is used to offset the selected block of text in a distinctive way -- depending on browsers. Generally blockquotes are set off from regular text by some kind of indentation.

1.	With your RIGHT mouse button, click on the element selector -- in the pop up menu

select extended quote. This will place the <Blockquote> </Blockquote> tags

around the selected text.

To remove the blockquote tags, select blockquote again from the pop-up menu.

Inserting Preformatted Text...

Generally, text in an HTML file is formatted based on the HTML tags used to mark up this text. The only exception is the <PRE> preformatted text tag. Any white space that you put into text that is surrounded by the <PRE></PRE> tags is retained in the final output.

The only noticeable difference is, that preformatted text is rendered in (graphical) browsers in a Courier font. Preformatted text is great for anything where you want to properly align columns of text and numbers in an easy readable format -- padding the display with white spaces.

Within the <PRE> tags, you can use link and character style tags -- but, NOT element tags, like headings and paragraphs.

We suggest to break you lines with a return, also keep your text always less than 80 characters per line. Browsers do not adjust preformatted text  -- if the text its larger than the widest browser window, nobody will be able to read the non displayed text.

Inserting Pre-Formatted Text...

1.	Insert a text element. (click on the text block button in the toolbar.

2.	With you RIGHT mouse button click anywhere within the just inserted text element.

3.	From the pop up menu select PREFORMATTED.

4.	Now everything you type or any text pasted from the clipboard in the preformatted

element will be displayed as is in a Courier type style.

RAW Text element...

 The raw text element is a unique tool to allow copying of existing tags into <Live Markup> eliminating re-typing. Or, the raw text element may be used for unsupported tag input, or comments within the document body.

Here is one use as example: Lets assume you have a previously created document from which you would like to copy a nested list:

1.	Click on the RAW text element button on the toolbar. A element inserts having a

WHITE background for type input. (if you have a white document background it is

difficult to stand out.)

2.	Copy the actual tags with text as is from the previous document and paste them in

the raw text element.

3.	Save the file, click on the SAVE button and give the file a name (if you did not do

this already)

4.	Go to FILE|RELOAD on the toolbar. Reload the just saved file into <Live Markup>.

The program in the above example, would display the new list in its WYSIWYG format -- eliminating the raw text element with its tags. Providing, and this is important -- the tags are conforming with proper HTML.

Inserting Background Images GIF or JPEG...

<Live Markup> supports the insertion and display of background images.

1.	From the pulldown menu select OPTIONS|set background image.

2.	Background Image Property window opens.

3.	Browse or type the image path -- see Creating Hyperlinks

3.	Click OK --  now the background toggle button is activated, showing red and gray. This is

a indicator, that this document has a background image.

4.	To see the actual background image together with type etc., click once on the red/gray

toggle button -- the image inserts in the document and the gray area in the toggle button

changes to white.

Anytime you see the red/white toggle button combination a background image was inserted in the document.

Remember: <Live Markup> will NOT display any image residing on a server. If you select a image residing somewhere on a different server, then you will have to connect to the Internet using your browser to check the document with the background image.

Background Image does NOT display -- Try to keep your background image together with your HTML documents. If you have your background image located on a different server, it requires the fetching of an image file from a second HTTP connection, it will slow down the perceived speed of your document load. None of your document can be displayed until the image is loaded and decoded. Needless to say, keep your background images small.

If you have the Auto Load Images option off, background images will not be loaded. If the background image is not loaded for any reason, and a BGCOLOR was not also specified, then any of the foreground controlling attributes (LINK, VLINK, and ALINK) will be ignored. The idea behind this is that if you didn't get your requested background image, setting your requested text colors on top a the default gray background may well make your document unreadable.

Changing Background, Type and Link Colors...

You can change the background color -- type color and all link colors with a few clicks of your mouse -- at this time only the NETSCAPE browser supports those attributes.

IMPORTANT: THE BGCOLOR ATTRIBUTE ONLY IN NETSCAPE...

This attribute to BODY is not currently in the proposed HTML 3.0 spec. Basically, many people just want to change the color of the background without having to specify a separate image that requires another network access to load. This attribute allows just that. The format that Netscape 1.1 understands is:

<BODY BGCOLOR="#rrggbb">Document here</BODY>

Where "#rrggbb" is a hexadecimal red-green-blue triplet used to specify the background color.

CHANGING BACKGROUND COLOR:

1.	From the OPTIONS menu select COLORS then BACKGROUND.

2.	The select background color window opens with 48 basic colors 16 custom colors and a

color wheel to define more colors.

3.	Click on any of the basic colors for example: RED, a indicator box surrounds the color

you selected -- now click on OK.

4.	The color selector closes and the selected color inserts in the background.

Option using color wheel to select custom colors:

a.	From the OPTIONS menu select COLORS then BACKGROUND.

b.	The select background color window opens with 48 basic colors 16 custom colors and a

color wheel to define more colors.

c.	Click on define custom colors. The color wheel window opens

d.	Click anywhere in the selection to define a new custom color.

e.	Then click on ADD to custom colors -- this way you can select up to 16 custom colors at

once.

HOW TO CONTROL THE DOCUMENT'S FOREGROUND

Clearly, once you have control of the background, you are going to need to also control the foreground to establish the proper contrasts. The following attributes are also recognized as part of the BODY tag by Netscape 1.1.

THE TEXT ATTRIBUTE

This attribute is used to control the color of all the normal text in the document. This basically consists of all text that is not specially colored to indicate a link. The format of TEXT is the same as that of BGCOLOR.

<BODY TEXT="#rrggbb">Document here</BODY>

CHANGING TEXT COLOR WITH <LIVE MARKUP>:

1.	From the OPTIONS menu select COLORS then TEXT.

2.	The select text color window opens with 48 basic colors 16 custom colors and a color

wheel to define more colors.

3.	Click on any of the basic colors for example: GREEN, a indicator box surrounds the color

you selected -- now click on OK.

4.	The color selector closes and ALL the text is displayed in the color you selected.

(Note: You can only change ALL TEXT to the new color -- browser default!)

THE LINK, VLINK, AND ALINK ATTRIBUTE IN NETSCAPE

These attributes let you control the coloring of link text. VLINK stands for visited link, and ALINK stands for active link. The default coloring of these is: LINK=blue, VLINK=purple, and ALINK=red. Again the format for these attributes is the same as that for BGCOLOR and TEXT.

<BODY LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">Document here</BODY>

CHANGING HYPERLINK, VLINK, ALINK & BLINK COLOR WITH <LIVE MARKUP>

1.	From the OPTIONS menu select COLORS then either hyperlink, visted link, active link or

blink.

2.	The select text color window opens with 48 basic colors 16 custom colors and a color

wheel to define more colors.

3.	Click on any of the basic colors for example: PURPLE, a indicator box surrounds the color you

selected -- now click on OK.

4.	The color selector closes and ALL the LINK or BLINK color is  displayed in the color you

selected.

BLINK, use it sparingly...

Here is how to insert the BLINK command. Please note: use it sparingly some people totally hate it.

1. Highlight the text you want to BLINK.

2. Click anywhere in the highlighted text with the RIGHT mouse button.

3. In the pop up menu select blink the color of the highlighted text changes to red (the default color) indicating that this is a blinking block of text in the Netscape browser.

To state the obvious, since these color controls are all attributes of the BODY tag, you can only set the colors once for the entire document. You cannot change coloring partially through a document.

Set user preferences in the Options menu...

Select OPTIONS|SET PREFERENCES, the user preference window opens. Check our default settings -- Netscape and Notepad.

BROWSER

Use the browse button to browse to your WWW browsers *.exe file. For example if you use Netscape browse to the Netscape directory, then to the netscape.exe file. Click on the file , then the OK button the directory path inserts in the browser like: C:\NETSCAPE\NETSCAPE.EXE

Once the browser preference is set. The next time you want to see how the document you are working on is looking in the selected browser. Just select BROWSER from the options window -- the selected browser is launched and the presently open document in <Live Markup> is automatically loaded in the browser window.

TEXT EDITOR

Use the browse button to browse to your favored text editor, or just type NOTEPAD.EXE in the window.

The default text import paragraph definition are set to \N\N, however, you may change them. Paragraph break is a string used to determine the beginning of a new paragraph, not the end of one. The only exception is the first paragraph, which is a paragraph by definition.

This string is also used to break up text when saving an HTML file as plain text. (File menu = save text only) There are a few characters that may be used in the string that aren't represented by any printed character. These are handled using a simple escape sequence. The backslash character '\starts the sequence. This may be followed by any of these:

2nd char	descr	ascii hex	comments value

---------------------------------------------------------------------------------------------------------------------

'a' or 'A'	audible bell	0x07	probably has little use

'b' or 'B'	backspace	0x08	also, little value

  'f' or 'F'	formfeed	0x0c

'n' or 'N'	newline	0x0a

'r' or 'R'	carriage return	0x0d

't' or 'T'	horz tab	0x09	same as the tab key

  'v' or 'V'	vert tab	0x0b

The default paragraph break is "\n\n"; this is simply two carriage returns and should break up any text file that uses two carriage returns to separate paragraphs.

The save as text item in the file menu saves the text portions of an HTML in a file

of the same name, but with a "txt" extension. The user will be prompted for a filename

if the document is new. This will not affect the HTML document's filename.

APPLICATION OPTIONS:

Warn on element delete. If this option is checked, every time you chose element delete a warning message is displayed.

MAXIMIZE MDI WINDOWS:

If this box is checked the Live Markup window will be always maximized.

Once the text editor preference is set. The next time you want to see the document tags, just select TEXT EDITOR from the options window -- the selected text editor is launched and the presently open document in <Live Markup> is automatically loaded in the text editor window.

Addresses...

Address tags go at the bottom of each Web page and are used to indicate who wrote the Web Page, who to contact for more information, the date last changed, any copyright notice, the page URL would be helpful also. Addresses are often preceded with a horizontal rule.

Signing each of your pages using the <ADDRESS> opening and </ADDRESS> closing tag is an excellent way to make sure that people can get in touch with you.

1.	Click on the text block button in the toolbar inserting a new text element.

2.	Click on the element with your RIGHT mouse button, from the pop up menu select

address.

3.	Now type the address information, taking full advantage of the line break feature <BR>

tag, by pressing the ENTER key.


Creating Hyperlinks

Hyperlinks -- what?

The HTML link tag <A> ...</A> also called anchor tag is used -- as it can also be used to create anchors for links. The <A> tag has some extra features associated with it ATTRIBUTES. The attribute most often used is the HREF attribute. Hypertext REFerence. The HREF is used to specify or name the URL of the file this link points to.

Like most HTML tags, the link tag also has a closing tag </A>. ALL the text between the <A> and </A> tags (excluding the attribute, like HREF) will become the actual link.

Building Hyperlinks from Text or Images...

Its easy to create hyperlinks, Just follow these easy steps.

TEXT:

1.	Highlight the actual text you want to create a link from. That is, the 'clickable text'.

2.	Click anywhere on the highlighted text with your RIGHT mouse button.

3.	From the pop-up menu select "create hyperlink". The window closes and the selected

text changes to the default color -- blue.

4.	Now double click diectly anywhere in the text hyperlink. The Hyperlink Property

Sheet opens, select the Hyperlink URL sheet in which the hyperlink information

must be typed, copied or browsed to.

IMAGES:

1.	Click anywhere within the Image with your RIGHT mouse button.

2.	In the Image Property Sheet click on the Hyperlink URL tab.

3.	Now type in, copy or browse to -- the proper hyperlink information.

NO HYPERLINK BORDER, around the image...

In the Image Property Sheet, select the ALIGNMENT tab -- in the BORDER THICKNESS tab -- type 0 (the number 0), then click on OK.

Additionally, you may select the border thickness of the hyperlink color around any image. This is done in the Image Property Sheet by double clicking on the image (left mouse button) and typing a number in the Border Thickness window. If you type  zero (0) there will be NO border hyperlink indicator.

Absolute versus relative URLs...

A URL points to a file or directory. There are three (3) distinct types of URLs: absolute, relative, and local.

Absolute versus relative URLs:

Relative URLs are used to point to information resources in the same directory or on the same server. This allows you to author HTML with total disregard for where your final HTML directory structure will be placed on the Web server or even what system the server will run on. You can direct the relative navigation between HTML documents using the same directory path navigation you use on UNIX to move up and down a directory tree. For example, to have a hyperlink that jumps up two levels in the directory structure to your home page, the following HTML could be used:  <A HREF=../../home.html>Return to Home Page</A>

Relative URLs also give you the flexibility to move your HTML directory structure anywhere on the Web. They also work when files are read directly from the file system by a Web browser, without the intervention of a Web server -- in local mode, useful for Web authoring.

Absolute URLs, are usually used to point to information resources on other servers, basically resources elsewhere on the Internet.

The full syntax for an absolute URL is: access-method://server-name[:port]/directory/file

.

access-method:  FTP (Port 21), Telnet (Port 23), Gopher (Port 70), HTTP (Port 80)

server-name:  mediatec.com (using default port)

directory:  /mediatech/

hypertext document:  index.html

Every file on the Internet is uniquely addressable by its URL, regardless of the type of file or the type of server it is provided by. Besides the http: access method, the URL concept also supports other important Internet protocol access methods such as Gopher, FTP, and TELNET.

<Live Markup> Property Sheet (Menu)...

The Hyperlink Property Sheet has two selectable tab sheets.

1. Hyperlink URL	Under the URL Protocol  you can select: HTTP, FTP, GOPHER,

FILE, TELNET, MAILTO, NEWS.

Example: The following URL ...

<A HREF = "http://www.mediatec.com/mediatech/lv16b10b.exe">

in its final form, should read, or be typed in the Hyperlink Information Window as follows:

a.)	URL Protocol: http

b.)	Host/News/Mailto: www.mediatec.com

c.)	Source (HREF): mediatech\lv16b10b.exe

Upon saving the document, the URL would be constructed by <Live Markup> automatically:

<A HREF = "http://www.mediatec.com/mediatech/lv16b10b.exe">

All DOS \ directory commands are reversed to the proper URL commands / when the file is saved. Also, the // after the http: are inserted automatically. Additionally, the / after the domain name is inserted, if there is another file name.

Here is another example: Lets assume, you want to create a mailto command, (hyperlink from the word e-mail like <A HREF = "mailto:peter@mediatec.com">e-mail</A>

a.)	URL Protocol: mailto

b.)	Host/News/Mailto: peter@mediatec.com

Nothing else is needed, when the document is saved <Live Markup> creates the proper tags in the file.

Use the Browse button to insert the proper Source (HREF) file information. If you use the browse button and move the file, remember to update the link.

IMPORTANT: The following are very important clickable selections on the Hyperlink Information Window. The program default setting is relative path. Absolute path should only be used if the file/image is at a different server -- if you click absolute path,  type the whole URL.

a.)	Save absolute path: should only be used if the URL Protocol, is used for file/image

input from different source on the Internet.

b.)	Upper case: The file name in the HREF is saved in all upper case only.

c.)	Lower case: On many servers it is necessary to insert the file name in the HREF

only in lower case -- clicking this selection will save the file name only in lower

case.

d.)	None: Duplicates the file name as is -- in lower, upper case or mixed -- generally this

setting should be used.

2. DATA	a.	This sheet allows for NAME LINK input.

b.	DELETE Hyperling, click on the delete button.

c.	Other Attribute input.

Delete/Edit Hyperlink...

DELETE a Text Hyperlink.

1.	DELETE -- If you want to delete a text hyper link (retaining the typed text), double

click on the link with your left mouse button.

2.	The Property Sheet (hyperlink window) opens -- now click on the DATA tab.

3.	Click on the DELETE button, then click on OK. Now the anchor is deleted and the

text in the HTML document will not indicate any link.

Other Delete Options...

Backspace over the hyperlink text, or highlight the complete hyperlink -- then press

the DELETE key.

EDIT a Text Hyperlink.

1.	EDIT -- If you want to edit a text hyper link, double click on the hyperlink with

your left mouse button.

2.	The Property Sheet, under the Hyperlink URL tab window, edit the hyperlink.

3.	Click on OK. Now the anchor is changed with the new data -- after saving the

document.

Delete/Edit a Image Hyperlink: If you want the change, edit or delete a image hyper link, click on the image with your RIGHT mouse button. From the pop up window select edit hyperlink, now the hyperlink-window opens -- change the link information or click on delete deleting the link completely.

This is not a World Wide Web Browser. Therefore, do not click on a link and expect the program to jump automatically to the destination link. Also, if you selected a image with an absolute path on a different server, dont expect to see the image in <Live Markup>.

Building a NAME link

Important: <Live Markup> does NOT allow empty Name links. This means, there has to be a word, sentence, or at least one letter between the opening and closing name tags.

It is very simple to build a NAME link with <Live Markup>, here is how:

(this example assumes, that all files on the server, are in the same directory.)

1.	you are at page three and want to jump to page one to a specific location create a

hyperlink as in the following example:

a.)	highlight a word (on page three in this example), click on the highlighted word, from

the pop up menu select create hyperlink, in the hyperlink Property Sheet, type:

b.)	In PATH: index.html#a1.1 ( index.html is the first page name, the # sign is to

link to a name link you create within this page, the a1.1 is just a unique designator.).

Click OK

2.	Now open the index.html page with <Live Markup>.

a.)	go to the word on the page where you want to build the NAME link. Highlight the

word, click with your RIGHT mouse button on the highlighted word, In the Property

Sheet click on the DATA tab.

b.)	in the Destination (NAME) box type only: a1.1 then click OK, when you save the file

<Live Markup> creates all the necessary tags.

The selected NAME word changes to the default color, indicating that this is a NAME link. At any time you can change the link by double clicking on the name link with your left mouse button in the Hyperlink Information Window.

You can change the colors of the hyperlink, visited link and active link. To do so, choose Options|Colors|<a/v/h>Link, and then choose the color from the clickable palette.

Image Maps and Relative Links...

Important: There is sometimes a problem with relative image map links -- they suddenly become invalid.

When the browser requests a document from the server, it constructs a URL, pointing to that document. If the link is relative the browser builds a complete URL from the information it has. Within an HTML document, all the relative links are not necessarily relative to that document itself, but they are relative to the URL of the document -- or, the browsers current idea of what the URL is.

Most of the time the browser builds accurate ULLs. However, sometimes browsing through an image map. the browser brings up not the document but the image information instead -- indicating the browser build the wrong relative URL.

There is a simple way to make sure, that browsers build proper Relative URLs from the base document -- here is a suggestion:

Place in your document the <BASE> tag in the head element.

<BASE HREF=http://myserver.com/docs/document.html>

If your browser reads a document with <BASE> in the head element, it uses that URL as default URL.

NOTE: Use the <BASE> tag only if needed. Any time you change directories or servers you also will have to change the <BASE> tag input.


<Live Markup> License Agreement

You should carefully read the following terms and conditions before using this software. Unless you have a different license agreement signed by MySoftware Company. for the use of this software, your use of this software indicates your acceptance of this license agreement and warranty.

Fourteen Day Evaluation and Registration

This is NOT free or shareware software. You are hereby licensed to use this software for evaluation purposes without charge for a period of 14 (fourteen) days, counting from the day you download this software. <Live Markup>PRO Copyright (c) 1996 by MySoftware Company. All Rights Reserved.

Registered Version

One registered copy of <Live Markup>PRO may either be used by a single person who uses the software personally on one or more computers,or installed on a single workstation used non-simultaneously by multiple people, but not both.

You may access the registered version of <Live Markup>PRO through a network, provided that you have obtained individual licenses for the software covering all workstations that will access the software through the network. For instance, if 6 different workstations will access <Live Markup>PRO on the network, each workstation must have its own <Live Markup>PRO license, regardless of whether they use <Live Markup>PRO at different times or concurrently.

Governing Law

This agreement shall be governed by the laws of the State of California, U.S.A.

Disclaimer of Warranty

THIS SOFTWARE AND THE ACCOMPANYING FILES ARE SOLD "AS IS" AND WITHOUT WARRANTIES AS TO PERFORMANCE OF MERCHANTABILITY OR ANY OTHER WARRANTIES WHETHER EXPRESSED OR IMPLIED.

In particular,there is no warranty for virus scanning. <Live Markup>PRO does not scan for viruses. Because of the various hardware and software environments into which <Live Markup>PRO may be put,.

 NO WARRANTY OF FITNESS FOR A PARTICULAR PURPOSE IS OFFERED.

Good data processing procedure dictates that any program be thoroughly tested with non-critical data before relying on it. The user must assume the entire risk of using the program.

ANY LIABILITY OF THE SELLER WILL BE LIMITED EXCLUSIVELY TO PRODUCT REPLACEMENT OR REFUND OF PURCHASE PRICE.

<Live Markup>PRO is a Trademark of MySoftware Company.

Copyright (c) 1996 MySoftware Company. All Rights Reserved.


Working with a List

There are three types of lists:

Unordered (bulleted) List: <UL list</UL>

Ordered (numbered) List: <OL> list</OL>

Definition List: <DL> list</DL>

In the first two types of lists, the elements of the list are designated with the <LI> list item tag. If a list item phrase is wider than the display with, the Web browser automatically wraps the phrase and aligns the next line to indent under the previous line. Lists can also be nested, meaning --  a list can be within another list.

The definition list, is used when the list items do not need to be bulleted or numbered and can stand on their own. Definition lists do not use the <LI> tag to mark a new list entry. Instead they use the <DT> and <DD> tagging pairs. The <DT> tag identifies the primary text, and the <DD> tag identifies the text associated with and indented below the <DT> tagging phrase.

List Item properties Menu...

Anytime you want to build a list the List Item Property Menu will give you all the different attributes.

MENU -- LIST DATA selection...

From here you select : unordered <UL>, ordered <OL> or definition list <DL>. You can check and change the list selection by clicking on the list element selector.

1.	Unordered, or bulleted lists -- typically labeled with bullets.

Unordered lists are lists in which the elements can appear in any order.

a)	Some browsers like Netscape, allow the <LI> element to be changed to a

circle, square, disk or what-ever...

Unordered Marker: Select from the Unordered Marker your choice of indicator for

each element level in nested lists. Remember, each browser will be different -- on

some you can select what-ever-you-want, on others it completely ignores the input.

2.	Ordered, or numbered lists -- typically labeled with numbers. When the browser

interprets an ordered list, it numbers (and often indents) each of the elements

sequentially. You do not have to do the numbering yourself, and if you add or delete

items, the browser will renumber them the next time the document is loaded. Use

ordered lists only, if you want to show items in specific order.

Unordered lists are lists in which the elements can appear in any order.

a)	Some browsers like Netscape, allow the <LI> element to be changed to

different markers.

Ordered Marker: Select from the Ordered Marker your choice of indicator for

each element level in nested lists. Remember, each browser will be different -- on

some you can select what-ever-you-want, on others it completely ignores the input.

In the START box you type the number you wish the list to start with, like: 13 for

example (my lucky number).

3.	Definition lists, or glossary lists in which each item in the list has a term and a

definition for that term -- arranged so that the term is somehow highlighted from the

text. Each element of a definition list has two parts:

a) A TERM

b) THAT TERMS DEFINITION

Each part of the definition list has its own tag <DT> for the term, and <DD> for the definition. Definition lists are generally formatted with the term and definition on separate lines, and the left margins of the definitions are indented. Definition list can be used anywhere an indented list is needed.

MENU -- LIST ITEM DATA selection...

To select the Definition list options = term <DT> and definition<DD>

You can check and change the selection by clicking on the selector.

Selector 3	is the  text selector. For text input.

And if all this is not enough and you feel to insert Other Attributes, there is a large space for it.

Building Lists.

click on *list* button in the toolbar, first list item is placed in document,

Remember: The default is Unordered List. To change the list to Ordered or

Definition just click directly on the list item (bullet) which brings up the List Item

Property Menu (Property Sheet) for changes under LIST DATA.

.	click on the textblock button in the toolbar -- and start typing...

.	click on *item* button in the toolbar, the next list item (bullet) is placed directly under the previous one in the document -- ready for type input.

.	again, click on the textblock button in the toolbar -- and start typing...

To start the next list item, click the item button in toolbar, then on the textblock button for type input.

To enter more list items continue the above procedure.

Exit any list, or nested list ...

Click approximately 1/8 or 4mm left of the first top list item" (not directly on it) -- check the status bar on the bottom of the document, it should say Current element LIST. Then just click on the textblock or horizontal rule etc. on the toolbar. This closes the list and the next selected element will be placed as a new separate element in the document.

Insert a paragraph before next list item...

To allow more space between some list items for a not to crowded look -- insert a empty text paragraph element. DO NOT select paragraph directly at the text line.

1.	Insert the first list item line like usual -- if you want to add some space before the next

line starts.

2.	Click on the text block in the toolbar, inserting another text element directly under

the last list item element.

3.	Click with your RIGHT mouse button on the empty text element. From the pop up

menu select paragraph, the element moves down. (allowing more space before the

next list item starts).

4.	Now continue inserting another list item...

Nested Lists...

You can place a list inside another list. The nested list just becomes another element of the first list, and it is formatted indented from the rest of the list. List like this work great for menu like entities in which you want to show hierarchy.

LEVEL 1

click on *list* button in the toolbar, first list item is placed in document.

click on the textblock button, now the cursor blinks, ready for type input.

LEVEL 2,3,4 or higher...

Whenever you want to make a nested list, going to the next higher level, just click on the list button in the toolbar.

Always make sure, that the Text Element (not the list item, circle etc.) in the level above, wherever you want insert another list, is selected.

.	If you want to continue with list elements in the same level..

for text input..

if you want to go to the next higher level.

Headlines Inside Lists:

If you want to use headers in an unordered or ordered list, Click with your right mouse button on the text, select HEADER, click with the right mouse button again on the text (unless you like the H1 default selection) from the pop up menu select the header size.

Now you have to eliminate the bullet, it would be hanging somewhere above the header.

Click directly on the list item bullet etc. from the List Item Properties menu select under LIST DATA Definition, then click OK.

Activating List Elements:

.Double click with your left mouse button directly on the list item (bullet etc.), this activates the List Item Properties menu (Property Sheet)

You would do this to change lists from unordered to ordered.

.Click directly with your left mouse button anywhere within the type, this brings the current textblock IN FOCUS for editing and other attribute changes.

You would do this to make changes in the text

.Click slightly LEFT of the list item (bullet etc.), not directly on it -- now the present list level is activated for editing, including all nested lists within this list level. For example: If you activate level three -- level four, five etc. would be included. However, any new list item would be placed in level three position. This way, you can easy move forth and back or completely out of a list.

You would do this to insert/delete list items at different levels.

A few points to remember:

1	Click all the way to the left and you selected the whole document.

2.	The status bar always shows in the element you selected.

3.	Any Property Sheet is available with the ALT+ENTER key combination.

Many browsers format nested ordered and unordered lists differently from their enclosing lists -- they might use a symbol other than a bullet for a nested list. You cannot determine what the exact formatting will be in the final output.


Working with Images

There are two ways to present graphics -- inline images and external images. Inline images are displayed by the Web browser as part of your document and are automatically retrieved along with the document. External images are displayed by a separate viewer program (started by the Web browser when needed) and must be triggered by a hyperlink.

The inline image is just one more piece of information that is included in the autoflow and autowrap of your HTML document on the Web browser screen. Actually the image is treated just like a word -- it can appear in the middle of a paragraph.

Placing Images...

 First  a text element has to be inserted. (This is always the first step)

  Then click on the Image insertion button on the toolbar. Now the Image smiley face is inserted next to the text element.

Double click on the smiley face next to the element selector. Now the Image Information Window opens. This window is designt for just about any imaginable image attribute possible. (Many available attributes are specific to the Netscape Browser).

Image Property Sheet...

1.	As soon as the image information window opens -- tell <Live Markup> where the image

file is located.

a.) 	type in the image path the image path window, (Example: if the image is in the same

directory, just type the file name, like: sample.gif) or, if you do not know the image

location click on the browse button...

b.)	now the file window opens -- select the image file (by double clicking on it) from the

proper directory. <Live Markup> will display the total path. Change the file path if needed,

depending on where the image will be located on the server.

c)	It is not compulsory, but strongly suggested to type an "alternative text"for the Image.

Under ATL TEXT type in the Alternative Text window a image name or description of it.

Remember the (unlucky) people who have no graphical browsers, using text only

programs, such as Lynx.

Other attribute changes you can make in the Image Property Sheet:

(Note: most of them are only valid for the Netscape browser -- ignored by other browsers)

See -- http://home.mcom.com/home/services_docs/html-extensions.html

The additions to your ALIGN options needs a lot of explanation. First, the values "left" and "right". Images with those alignments are an entirely new floating image type. A ALIGN=left image will float down and over to the left margin (into the next available space there), and subsequent text will wrap around the right hand side of that image. Likewise for ALIGN=right the image aligns with the right margin, and the text wraps around the left.

ALIGN=top does just what it always did, which is align itself with the top of the tallest item in the line. ALIGN=texttop does what many people thought top should do which is align itself with the top of the tallest text in the line (this is usually but not always the same as ALIGN=top). ALIGN=middle does just what it always did, it aligns the baseline of the current line with the middle of the image. ALIGN=absmiddle does what middle should have done which is align the middle of the current line with the middle of the image. ALIGN=baseline aligns the bottom of the image with the baseline of the current line. ALIGN=bottom does just what it always did (which is identical to ALIGN=baseline but baseline is a better name). ALIGN=absbottom does what bottom should have done which is align the bottom of the image with the bottom of the current line.

Horizontal spacing: HSPACE controls the horizontal space to the left and right of the image. If you want to place some empty space next to your image, inserting a number in this box,  will create a empty space between the image and text or another image -- the higher the number, the larger the white space.

Vertical spacing: any number in this box, VSPACE controls the vertical space above and below the image.

Border thickness: This lets the document author control the thickness of the border around an image displayed. Warning: setting BORDER=0 on images that are also part of anchors may confuse your users as they are used to a colored border indicating an image is an anchor.

Image width and Image height: any number in either of the two boxes will change the image height or width accordingly. If you specify WIDTH and/or HEIGHT values in an IMG tag that differ from the actual width and/or height of the image. Netscape Navigator will use the width and height values specified in the IMG tag and scale the actual image to fit.

For example, if you have an image that is actually 123 pixels wide and 78 pixels high, but you create a document that inlines the image as follows:

<IMG SRC="b.gif" WIDTH=492 HEIGHT=312> the image will be scaled to fit the dimensions 492 by 312. This means you can purposely cause any image (GIF or JPEG) to be scaled to a larger size (or, for reasons I can't imagine, a smaller size) on the fly, by Netscape Navigator. See an example of scaling in action. calculated.

Browsers that do not do auto-scaling will cleanly ignore any WIDTH and HEIGHT attributes you add to your IMG tags and will display the inlined image at the normal, unscaled size.

Show image: if you select reduced -- it will show the image in a thumb nail format.

Alignment: all the different alignments in regards to text. For example: Top alignment places the top of the image even with the top of the current line of text Left  places the image to the left and any text is flowing to the right alongside the image depending on its size -- and so on. If align is omitted , bottom alignment is the default.

If you need to make additional attribute changes in the Image Information box, type them in the other attributes box.

 We suggest to  visit The Netscape site to learn about the meaning of all the attributes. It will help you to build better looking Web Pages.

Once you click OK on the image information window, the window closes and the image will be placed in the document.

NOTE: Presently, <Live Markup> may not display many of the various different text alignments possible.(we are working on it). However, all the proper tags are inserted for display with the Netscape browser.

Remember: Double clicking with the left mouse button on any Image displays the Image Property Sheet. Right clicking on any image pops up the image re-sizing.

Images and URLs ( why dont I see my Image)

Most mistakes are made by NOT understanding, in how to place the image path -- consequently placing a totally wrong image path in the html document, and then wondering why cant I see my image? Read the following carefully...

Ask this question? Where will the image be on your server in relation to the HTML file?

1	If you rent space on a server: You will most likely have only ONE HTML directory for all

your files, including images.

Therefore: Prepare and keep all the HTML files you will use on the Server, including Images, in the SAME Directory on your PC.

What do you type in the Image Property Sheet under Image URL -- in the PATH= the actual file name, nothing else. No browsing to the image -- nothing. If the file is names test.gif, thats exactly what you type in. Also click on Save in lower case. Most Unix systems are case sensitive.

2	If you run your own server: You have two choices.

a) Duplicate the HTML directory structure on your PC from your Server (most unlikely),

however, this way you could browse to the Images and keep the relative file structure.

b) Save the image using Absolute path and type the location of the image in the Image

path see absolute path.Again, if you ever move the image you will have to change

the absolute path.

Remember: If you browse to your Image from the Image Property Sheet IMAGE URL to a different directory wherever the Image is located -- a relative path is established. The HTML file in relation to your Image. If you move the image at any time thereafter the relationship is broken and the image will not display.

Sizing Images on-screen (Netscape)

A great new feature in <Live Markup> is the on-screen sizing of Images. The re-sizing of images is only valid if it is supported by a Web browser with the Image with and Image height element input like Netscape for example.

Remember: <Live Markup> does NOT change the actual image file in the re-sizing, only the browser display output.

To size your image on-screen, follow these simple steps:

1.	Click with your right mouse button directly anywhere in the image -- from the pop-up

menu select RESIZE. As soon as you let the mouse button go the image will be activated

for re-sizing. Therefore...

2.	PROPORTIONAL Image re-sizing: Press the CONTROL key on your keyboard first, then

move the mouse horizontal -- the image will resize now PROPORTIONALLY. The same

with the SHIFT (up arrow) key, if you move the mouse vertically

Remember: The two keys CONTROL or SHIFT, lock the mouse movement either horizontal or vertical, keeping the re-sizing of the image proportional.

3.	UN-PROPORTIONAL Image re-sizing: After selecting RESIZE from the pop-up menu do

not press any key -- just move the mouse horizontal, vertical or both, the image follows

the mouse movements until you click either mouse button.

4.	WHAT IS THE NEW SIZE? Click once on the image with the left mouse button -- in the

Property Sheet under ALIGNMENT you see the IMAGE WIDTH and IMAGE HEIGHT

indicated in pixels. Of course, you can also change directly the pixel width and height by

typing a new value in directly.

5.	BACK TO THE ORIGINAL SIZE? During the Image sizing -- key ESC.

Click once on the image with your left mouse button, then in the Property Sheet under

ALIGNMENT delete the numbers in the IMAGE WIDTH and IMAGE HEIGHT window.

Image width and Image height: any number in either of the two boxes will change the image height or width accordingly. If you specify WIDTH and/or HEIGHT values in an IMG tag that differ from the actual width and/or height of the image. Netscape Navigator will use the width and height values specified in the IMG tag and scale the actual image to fit.


Building IMAGE Maps

There are basically three (3) steps...

1.	Selecting the Image you want to use.

2.	Creating a map file, a text file indicating the coordinates of various areas on the

image and then mapping those areas to URLs to load when a hit within the selected

area is detected.

3.	Connecting the image, map file, and the gateway script to process it all by placing the

image in an HTML file and indicating that it is a Image Map.

The clickable regions on your image can be of several different shapes: circles, rectangles, arbittarily shaped polygons and squares.

To start, scetch out the basic idea on paper first -- print the image and roughly scetch the regions you want to use indicating the shapes and URLs to connect to -- then do the actual image map construction on the screen.

My image maps are not working...

1.	Make sure that the URLs in your map file are absolute path names from the top of your

root Web directory to the location of the file you want to link to. You cannot use relative

path in the map file.

2.	Make sure that when you append the path of the map file to the gateway script (htimage

or imagemap) that you use an absolute path name.

Client Side IMAGE MAPS...

Image maps are sometimes useful, but until now usually only those who could use cgi scripts

could use them.  They also aren't as fast as regular links because the server needs to run the

cgi script to determine what to do with your request.  Netscape 2.0 now allows client side image

maps. This allows EVERYBODY to use them, and doesn't require another connection.  This will

make your image map as fast as clicking a regular link.

Netscape's description of client side image maps follows:

IMG element indicates that it is a client-side image map. The

USEMAP attribute can be used with the ISMAP attribute to indicate that the the image can be

processed as either a client-side or server-side image map. The argument to USEMAP

specifies which map to use with the image, in a format similar to the HREF attribute on anchors.

If the argument to USEMAP starts with a '#', it is assumed to be in the same document as the

IMG tag. A few examples would be:

You can only click here if your browser supports client-side image maps:

<IMG SRC="../images/tech/pic1.gif" USEMAP="maps.html#map1">

This image map will work regardless: <A HREF="/cgi-bin/image map/pic2">

<IMG SRC="../images/tech/pic2.gif" USEMAP="maps.html#map2" ISMAP></A>

Clicking here will take you to a page with an error message if you don't have client-side image map support: <A HREF="no_csim.html"> <IMG SRC="../images/tech/pic3.gif"

USEMAP="maps.html#map3"> </A>

The different regions of the image are described using a MAP element. The map describes

each region in the image and indicates where it links to. The basic format for the MAP element

is as follows:

<MAP NAME="name"> <AREA [SHAPE="shape"] COORDS="x,y,..." [HREF="reference"]

[NOHREF]> </MAP>

The name specifies the name of the map so that it can be referenced by an IMG element. The

shape gives the shape of this area. Currently the only shape defined is "RECT", but the syntax

is defined in such a way to allow other region types to be added. If the SHAPE tag is omitted,

SHAPE="RECT" is assumed. The COORDS tag gives the coordinates of the shape, using

image pixels as the units. For a rectangle, the coordinates are given as "left,top,right,bottom".

The rectangular region defined includes the lower-right corner specified, i.e. to specify the the

entire area of a 100x100 image, the coordinates would be "0,0,99,99".

The NOHREF tag indicates that clicks in this region should perform no action. An HREF tag

specifies where a click in that area should lead. Note that a relative anchor specification will be

expanded using the URL of the map description as a base, rather than using the URL of the

document from which the map description is referenced. If a BASE tag is present in the

document containing the map description, that URL will be used as the base.

An arbitrary number of AREA tags may be specified. If two areas intersect, the one which

appears first in the map definition takes precedence in the overlapping region. For example, a

button bar in a document might use a 160 pixel by 60 pixel image and appear like this:

<MAP NAME="buttonbar"> <AREA SHAPE="RECT" COORDS="10,10,49,49"

HREF="about_us.html"> <AREA SHAPE="RECT" COORDS="60,10,99,49"

HREF="products.html"> <AREA SHAPE="RECT" COORDS="110,10,149,49"

HREF="index.html"> <AREA SHAPE="RECT" COORDS="0,0,159,59" NOHREF>

</MAP><IMG SRC="../images/tech/bar.gif" USEMAP="#buttonbar">

The Image Map feature will be included in this program soon --

all registered users will receive a listmail message.


<Live Markup> REGISTRATION

Why Register?

For one, you encourage us to keep going, and give you a constantly updated product. We need your support to help us make up on the time and effort we spend working on the development of <Live Markup>.

 <Live Markup> PRO, supports viewing of GIF, JPEG, BMP, TGA, PCX, TIF Images directly on-screen in the document you are building or editing. Place images next to each other, change them, add text or move everything around until you have the proper "look" of your page, all in a WYSIWYG layout environment.

 WYSIWYG Forms building -- with a few mouse clicks, fast and easy forms building program in a simple  WYSIWYG environment for ease of use. Build better looking forms, since you SEE what you GET --  all without any manual tag input.

 HTML 3.0 Table building -- <Live Markup>PRO with its WYSIWYG format is the ideal editor for creating tables with a few commands -- imagine, editing text, images, hyperlinks and nested tables -- all in a WYSIWYG format --

 Imagemap building and editing directly on-screen in a WYSIWYG format.

On-screen Image re-sizing for better page layout. This will be about as close you get to DTP, just move the corner handle of the image with your mouse for automatic new size input in the image file for the Netscape browser.

 Works with Microsoft Windows-95 and Microsoft Windows NT with looong file names in true 32-bit mode.

 FREE Customer support through email and telephone. (until December 31, 1995)

e-mail: support@mediatec.com

Telephone: 216-526-6788

 All Registered users are placed on a special PRO Mailing List with access to automated document Information mailbots.

These are some powerful reasons to Register NOW -- its only US$ 59.00 to upgrade to the PRO version, save $$ and receive FREE upgrades until December 31, 1995 -- everything at a ridiculously low price -- for a limited time.

Two <Live Markup>PRO versions are available:

1.	16-bit version for use with Windows 3.1

2.	32-bit version for use with Windows95 and Windows NT.

Preference License:

1.	Preference License -- If we receive your US$59 payment by December 31, 1995,

you can download the <Live Markup>PRO version now (from password protected

server). Additionally all future up-grades of <Live Markup> PRO are FREE until

December 31,1995 save $$$. Includes FREE e-mail support until December 31,1995.

2.	Starting January 1, 1996 the License fee for <Live Markup> PRO will be US$ 79.00.

For Educational use and full-time Students, the price for a single copy of <Live Markup>PRO is US$ 29.00 regardless when the product is registered throughout 1995, with FREE upgrades from our server until March 31, 1996 (must have a *.edu e-mail address to qualify). All educational orders must be faxed to 216-526-5985 with a copy of the Student I.D..

University Site License: US$199.00 for the first 50 Computers on a Network -- each additional Computer US$ 2.00. All Site License orders must be faxed to 216-526-5985.

Commercial Site License: 2 - 25 Computers = 30% discount; 26 - 50 Computers = 40% discount; over 50 Computers = 50% discount. All Site License orders must be faxed to 216-526-5985.

Questions: Please call Peter Moeritz at 216-526-6788 or Fax: 216-526-5985

--------------------------------------------------------------------------------------------------------------------------------

DIFFERENT PAYMENT METHODS AVAILABLE....

If you have a FAX available -- this is the simplest and most preferred registration method..

Fax:	Please fax the following to: 216-526-5985

Visa/Master Card, American Express, Discover & Diners Club:

     Full Name (as it appears on credit card)

     Credit Card Number

     Expiration Date

     your e-mail address (please make sure your computer transmits the @ properly)

     Street Address (Credit Card Bill is mailed to):

     City (Credit Card Bill is mailed to):

     State or Province (Credit Card Bill is mailed to):

     Zip Code (USA & Canada) or Country:

     Telephone Number and Fax Number:

.....16-bit or 32-bit version (16-bit for Windows 3.1 or 32-bit for Windows95 & NT)

We e-mail your Registration Number, File Name and Location for downloading within 1 - 12 hours.

----------------------------------------------------------------------------------------------------------------------------------

Check or Money Orders:

Important: write your e-mail address on check or money order. Also 16-bit or 32-bit version ordered (16-bit for Windows 3.1 or 32-bit for Windows95 & NT)

Sent check or money order to:

MediaTech Inc.

9785 Shenandoah Dr.

Cleveland, Ohio 44141-2833

We e-mail your Registration Number, File Name and Location for downloading within 12 hours after receipt of check.

----------------------------------------------------------------------------------------------------------------------------------

Call 800 Number:

Visa/Master Card, American Express, Discover & Diners Club:

Register <Live Markup> with your Credit Card by following these simple two steps:

1. Step 	E-Mail the following to: register@mediatec.com

In the Subject line, type only: Register

In the Message body, type: Your Name (as it appears on credit card):

Street Address, City, State or Province, Zip Code or Country.

16-bit or 32-bit version ordered (16-bit for Windows 3.1 or 32-bit for Windows95

and NT)

2. Step:	Call 1-800-526-8012 Call 24 hours, just give our Operators your Name, Credit

Card Number, Expiration date and e-mail address -- it's simple and fast.

(make sure to e-mail us your Postal Address and which version number

you are ordering -- see step 1 above)

We e-mail your Registration Number, File Name and Location for downloading within 12 - 24 hours.

----------------------------------------------------------------------------------------------------------------------------------

Purchase Orders...

Purchase orders (net 30 days) are accepted only from government and accredited educational institutions and major corporations, provided that they are submitted on purchase order forms with a purchase order number. Mail to:  Mediatech Inc., 9785 Shenandoah Dr., Cleveland Ohio 44141-2833.

Due to the extra work involved in processing purchase orders, you are encouraged to use a credit card, petty cash, or an expense account when ever possible for small orders.

International Orders: outside the USA and Canada...

We accept checks in your local currency -- We accept Personal, Company and Bank checks in your local currency at the prevailing exchange rate (plus 5% exchange rate variable). Payable to: Mediatech Inc., 9785 Shenandoah Dr., Cleveland Ohio 44141-2833 USA.

---------------------------------------------------------------------------------------------------------------------------------

Our disclaimer: Your choice of payment method is at your own risk. We take all reasonable precautions to safeguard your account information, MediaTech Inc. makes no recommendation or representation concerning the reliability or safety of any on-line payment method.

INFORMATION PROVIDED IN THIS DOCUMENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND FREEDOM FROM INFRINGEMENT.

The user assumes the entire risk as to the accuracy and the use of this document. This document may be copied anddistributed subject to the following conditions: 1) All text must be copied without modification and all pages must be included; 2) All copies must contain MediaTech's copyright notice; and 3) This document may not be distributed for profit.


Learning HTML

About The World Wide Web

The World Wide Web (W3) is the universe of network-accessible information, an embodiment of human knowledge. It is an initiative started at CERN, now with many participants. It has a body of software, and a set of protocols and conventions. W3 uses hypertext and multimedia techniques to make the web easy for anyone to roam, browse, and contribute to.

http://www.w3.org/hypertext/WWW/WWW/

Entering the World Wide Web, a guide to Cyberspace. Lots of valuable information.

http://www.eit.com/web/www.guide/

SnapSolution: How to Design Your Own Home Page, by Thom Foulks

http://www.zdnet.com/~zdi/software/snapsol/snapweb0.html

Style Guide for online hypertext This guide is designed to help you create a WWW hypertext database that effectively communicates your knowledge to

the reader. ©Tim BL 1992,93,94,95 All rights reserved.

http://www.w3.org/hypertext/WWW/Provider/Style/Overview.html

The HTML Writers Guild This is the HTML Writers Guild's list of HTML resources. The scope of this document has been limited to ``documents that help you write HTML.

http://ugweb.cs.ualberta.ca/~gerald/guild/html.html

Web Style Manual. This manual describes the design principles used to create the pages within the Center for Advanced Instructional Media's (C/AIM) World Wide Web site.

http://info.med.yale.edu/caim/StyleManual_Top.HTML

A Beginner's Guide to HTML - from ncsa. A good guide for beginners. This is a primer for producing documents in HTML, the markup language used by the World Wide Web.

http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

Developing a High-End Web Site Understanding the Technical Foundation: HTTP

http://WWW.Stars.com/

World Wide Web FAQ. World Wide Web Frequently Asked Questions.

http://sunsite.unc.edu/~boutell/faq/

Books about the World Wide Web and HTML

http://www.yahoo.com/Business_and_Economy/Products_and_Services/Books/Internet/World_Wide_Web/

Teach Yourself More Web Publishing with HTML in a Week by Laura Lemay. Two easy to learn and read books. Teach Yourself MORE Web Publishing with HTML in a Week is the sequel to the wildly popular Teach Yourself Web Publishing with HTML in a Week.

http://slack.lne.com/Web/Books/More_HTML/

NOTE: All links have been tested 11/18/95 -- Pages are moved and changed all the time. If a link does not work, tell us about it.


Register <Live Markup>PRO

Register <Live Markup>PRO now for only $ 49, FREE e-mail support and upgrades for 4 month ...

Here is your opportunity to get a Software License for the full 32-bit or 16-bit

version of <Live Markup>PRO at a very low price.

Two <Live Markup>PRO versions are available:

1.	16-bit version for use with Windows 3.1 and WFWG

2.	32-bit version for use with Windows95 and Windows NT.

(No win32s support)

Different <Live Markup>PRO Licenses are available for Commercial or Educational use.

-----------------------------------------------------------------------------------------------------------------------------

US$ 49.00 -- S4 -- Single user License. (32-bit or 16-bit version)

US$ 59.00 -- S6 -- Single user License. (32-bit or 16-bit version)

US$ 79.00 -- S12 -- Single user License. (32-bit or 16-bit version)

MULTI user -- MX -- Commercial License (32-bit and/or 16-bit versions)

US$ 29.00-- E6 -- Single user Educational License. (32-bit or 16-bit)

US$ 299.00 - ES -- Educational Site License for all Schools and Universities Worldwide.

School District discounts: Site Licenses for multiple Schools in the same School district (City or County/Province) are US$ 199.00 each -- must be purchased at the same time.

Additionally, all registered users are members of a special mailing list for confidential <Live Markup>PRO upgrade information, and may access different mailbot's with special HTML "How To..." suggestions.

<Live Markup>PRO License:

US$ 49 -- S4 -- Single user License: After we receive your US$49 payment, we send you email with the file name and download instructions (from password protected server) for the 16 or 32-bit <Live Markup>PRO program . Expect the email Registration from us within 1-12 hours, depending on  method used. Includes FREE up-grades of <Live Markup> PRO and FREE e-mail support for 4 month.

US$ 59 -- S6 -- Single user License: After we receive your US$59 payment, we send you email with the file name and download instructions (from password protected server) for the 16 or 32-bit <Live Markup>PRO program. Expect the email Registration from us within 1-12 hours, depending on  method used. Includes FREE up-grades of <Live Markup> PRO and FREE e-mail support for 6 month.

US$ 79 -- S12 -- Single user License: After we receive your US$79 payment, we send you email with the file name and download instructions (from password protected server) for the 16 or 32-bit <Live Markup>PRO program. Expect the email Registration from us within 1-12 hours, depending on  method used. Includes FREE up-grades of <Live Markup> PRO and FREE e-mail support for 12 month.

Multi user -- MX -- Commercial License: Register 2 - 25 Computers at a 30% discount; 26 - 50 Computers at a 40% discount; over 50 Computers at a 50% discount. Select from the US$ 49, US$59 or US$ 79 base License to calculate the discount from. You may download either or both -- 32-bit or/and 16-bit version. All Multi user License orders must be faxed to 216-526-5985.

Educational License must be faxed:

US$ 29 -- E6 -- Single user Educational License. After we receive your US$29 payment, we send you email with the file name and download instructions (from password protected server) for the 16 or 32-bit <Live Markup>PRO program. Expect the email Registration from us within 1-12 hours, depending on  method used. Includes FREE up-grades of <Live Markup> PRO and FREE e-mail support for 6 month.

Qualifications for the special US$ 29 educational price are: Anyone registering with a *.EDU email address (in USA only) qualifies automatically. Other full time Students using commercial email providers, or Students and Educators from other Countries must  with a copy of a School or University Identification Pass. Educational Site License must be faxed:

US$ 299 -- ES -- Educational Site License for all Schools and Universities Worldwide. Each Site License is valid for up to 250 Computers on a single or multiple Networks. All Site License Purchase Orders must be faxed to 216-526-5985 with a contact email address. After we receive your Purchase Order or payment, we email the file name and download instructions (from password protected server) for the 16 and/or 32-bit <Live Markup>PRO program. Note: With this Site License, you may use both -- the 16-bit and 32-bit version on different servers. Includes FREE up-grades of <Live Markup> PRO and FREE e-mail support for 12 month.

Special time limited Offer: School District discounts -- Site Licenses for multiple Schools in the same School district (City or County/Province) are US$ 199.00 each -- must be purchased at the same time.

 PAYMENT METHODS AVAILABLE....

Visa/Master Card, American Express & Discover Card accepted:

FAX your Registration:  (most preferred -- a must for all educational orders)

If you have a FAX available -- this is the simplest and most preferred registration method. We e-mail your Registration Number, File Name and Location for downloading within 1 - 12 hours.

1.	Full Name (as it appears on credit card)

2.	Credit Card Number (Visa/Master Card, American Express & Discover Card accepted)

3.	Expiration Date

4.	your e-mail address (please make sure your computer transmits the @ properly)

5.	Street Address (Credit Card Bill is mailed to):

6.	City (Credit Card Bill is mailed to):

7.	State or Province (Credit Card Bill is mailed to):

8.	Zip Code (USA & Canada) or Country:

9.	Telephone Number and Fax Number:

We e-mail your Registration Number, File Name and Location for downloading within 1 - 12 hours.

CHECK or Money Orders:

Important: write your e-mail address on check or money order. Sent check or money

order to:

Live Markup Order Department

MySoftware Company

2197 East Bayshore Road

Palo Alto, CA 94303

International: We accept your Personal, Company and Bank checks in your local currency at the prevailing exchange rate (plus 5% exchange rate variable). We do NOT accept checks in US Dollars drawn on a Foreign Bank. All Checks should be payable to: MySoftware Company

We e-mail your Registration Number, File Name and Location for downloading within

12 hours after receipt of check.

CALL 800 Number:

Visa/Master Card, American Express & Discover Card accepted:

Register <Live Markup> with your Credit Card by following these simple two steps:

1.Step	 E-Mail the following to: register@mediatec.com

In the Subject line, type only: Register

In the Message body, type: Your Name (as it appears on credit card):

Street Address, City, State or Province, Zip Code or Country.

2. Step	Call 1-800-526-8012 call 24 hours, just give our Operators your Name,

Credit Card Number, Expiration date and e-mail address -- it's simple and fast. (make

sure to e-mail us your Postal Address -- see step 1 above)

We e-mail your Registration Number, File Name and Location for downloading within

12 - 24 hours.

First Virtual:

Register <Live Markup> with your First Virtual account:

1.	E-mail to: register@mediatec.com

2.	In the Subject line type: register

3.	In the Message box type: Your Name

Your First Virtual Account Identifier

Your e-mail address

We e-mail your Registration Number, File Name and Location for downloading within

12 hours.

Purchase Orders...

Purchase orders (net 30 days) are accepted only from government and accredited educational institutions and major corporations, provided that they are submitted on purchase order forms with a purchase order number. Mail to:

Live Markup Order Department

MySoftware Company

2197 East Bayshore Road

Palo Alto, CA 94303

Due to the extra work involved in processing purchase orders, you are encouraged to use a credit card, petty cash, or an expense account when ever possible for small orders.

-----------------------------------------------------------------------------------------------------------------------------

Our disclaimer: Your choice of payment method is at your own risk. We take all reasonable precautions to safeguard your account information, MySoftware Company makes no recommendation or representation concerning the reliability or safety of any on-line payment method.

-----------------------------------------------------------------------------------------------------------------------------

INFORMATION PROVIDED IN THIS DOCUMENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED,INCLUDING BUT NOT LIMITED TO THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND FREEDOM FROM INFRINGEMENT.

The user assumes the entire risk as to the accuracy and the use of this document. This document may be copied and distributed subject to the following conditions: 1) All text must be copied without modification and all pages must be included; 2) All copies must contain the MySoftware Company copyright notice; and 3) This document may not be distributed for profit.

<Live Markup> is a Trademark of MySoftware Company

Copyright © 1996 MySoftware Company

URL:http://www.mediatec.com/register.html


Virtual Keyboard

Special Characters...

HTML files are strict ASCII text and should NOT contain any formatting or fancy characters. HTML files must be from the standard 7-bit ASCII character set, and cannot include any characters from the extended 8-bit ASCII set. HTML browsers interpret codes from the upper ASCII as characters in the ISO-LATIN -1 (ISO-8859-1) character set a superset of ASCII.

HTML provides a reasonable solution to the problem. It defines a special set of codes, called character entities. When interpreted by a browser, these character entities are displayed as the proper special character for the given platform and font.

We developed a Virtual Keyboard to make it very simple for you to insert special characters -- with the click of a mouse.

Working with the Virtual Keyboard...

1.	Place the cursor in your HTML document wherever you need a ISO Latin 1 character

inserted.

2.	Click on the OPTIONS| Virtual Keyboard menu in the toolbar -- a virtual keyboard

with ISO Latin 1 characters opens on your screen in the upper left corner.

3.	Select the character you want to insert in the HTML document, then click with your

mouse on it -- this character is now inserted in your document with the proper html

tags.

This feature is especially valuable for the Copyright and Registered Trademark input among other often used special characters.

Characters from Netscapes iso8859-1 table

iso8859-1 table

Description                               Code            Entity name

===================================       ============    ==============

quotation mark                            &#34;  --> "    &quot;   --> "

ampersand                                 &#38;  --> &    &amp;    --> &

less-than sign                            &#60;  --> <    &lt;     --> <

greater-than sign                         &#62;  --> >    &gt;     --> >

Description                          Char Code            Entity name

===================================  ==== ============    ==============

non-breaking space                        &#160; -->      &nbsp;   -->

inverted exclamation mark            ¡    &#161; --> ¡    &iexcl;  -->&iexcl;

cent sign                            ¢    &#162; --> ¢    &cent;   --> &cent;

pound sign                           £    &#163; --> £    &pound;  -->&pound;

currency sign                        ¤    &#164; --> ¤    &curren; -->&curren;

yen sign                             ¥    &#165; --> ¥    &yen;    --> &yen;

broken vertical bar                  ¦    &#166; --> ¦    &brvbar; --> &brvbar;

                                                          &brkbar; --&brkbar;

section sign                         §    &#167; --> §    &sect;   --> &sect;

spacing diaresis                     ¨    &#168; --> ¨    &uml;    --> &uml;

copyright sign                       ©    &#169; --> ©    &copy;   --> ©

feminine ordinal indicator           ª    &#170; --> ª    &ordf;   --> &ordf;

angle quotation mark, left           «    &#171; --> «    &laquo;  -->&laquo;

negation sign                        ¬    &#172; --> ¬    &not;    --> &not;

soft hyphen                          ­    &#173; --> ­    &shy;    --> &shy;

circled R registered sign            ®    &#174; --> ®    &reg;    --> ®

spacing macron                       ¯    &#175; --> ¯    &hibar;  -->&hibar;

degree sign                          °    &#176; --> °    &deg;    --> &deg;

plus-or-minus sign                   ±    &#177; --> ±    &plusmn; --&plusmn;

superscript 2                        ²    &#178; --> ²    &sup2;   --> &sup2;

superscript 3                        ³    &#179; --> ³    &sup3;   --> &sup3;

spacing acute                        ´    &#180; --> ´    &acute;  -->&acute;

micro sign                           µ    &#181; --> µ    &micro;  -->&micro;

paragraph sign                       ¶    &#182; --> ¶    &para;   --> &para;

middle dot                           ·    &#183; --> ·    &middot; --&middot;

spacing cedilla                      ¸    &#184; --> ¸    &cedil;  -->&cedil;

superscript 1                        ¹    &#185; --> ¹    &sup1;   -->&sup1;

masculine ordinal indicator          º    &#186; --> º    &ordm;   -->&ordm;

angle quotation mark, right          »    &#187; --> »    &raquo;  -->&raquo;

fraction 1/4                         ¼    &#188; --> ¼    &frac14; --&frac14;

fraction 1/2                         ½    &#189; --> ½    &frac12; --&frac12;

fraction 3/4                         ¾    &#190; --> ¾    &frac34; --&frac34;

inverted question mark               ¿    &#191; --> ¿    &iquest; --&iquest;

capital A, grave accent              À    &#192; --> À    &Agrave; --> À

capital A, acute accent              Á    &#193; --> Á    &Aacute; --> Á

capital A, circumflex accent         Â    &#194; --> Â    &Acirc;  --> Â

capital A, tilde                     Ã    &#195; --> Ã    &Atilde; --> Ã

capital A, dieresis or umlaut mark   Ä    &#196; --> Ä    &Auml;   --> Ä

capital A, ring                      Å    &#197; --> Å    &Aring;  --> Å

capital AE diphthong (ligature)      Æ    &#198; --> Æ    &AElig;  --> Æ

capital C, cedilla                   Ç    &#199; --> Ç    &Ccedil; --> Ç

capital E, grave accent              È    &#200; --> È    &Egrave; --> È

capital E, acute accent              É    &#201; --> É    &Eacute; --> É

capital E, circumflex accent         Ê    &#202; --> Ê    &Ecirc;  --> Ê

capital E, dieresis or umlaut mark   Ë    &#203; --> Ë    &Euml;   --> Ë

capital I, grave accent              Ì    &#204; --> Ì    &Igrave; --> Ì

capital I, acute accent              Í    &#205; --> Í    &Iacute; --> Í

capital I, circumflex accent         Î    &#206; --> Î    &Icirc;  --> Î

capital I, dieresis or umlaut mark   Ï    &#207; --> Ï    &Iuml;   --> Ï

capital Eth, Icelandic               Ð    &#208; --> Ð    &ETH;    --> Ð

capital N, tilde                     Ñ    &#209; --> Ñ    &Ntilde; --> Ñ

capital O, grave accent              Ò    &#210; --> Ò    &Ograve; --> Ò

capital O, acute accent              Ó    &#211; --> Ó    &Oacute; --> Ó

capital O, circumflex accent         Ô    &#212; --> Ô    &Ocirc;  --> Ô

capital O, tilde                     Õ    &#213; --> Õ    &Otilde; --> Õ

capital O, dieresis or umlaut mark   Ö    &#214; --> Ö    &Ouml;   --> Ö

multiplication sign                  ×    &#215; --> ×    &times;  -->&times;

capital O, slash                     Ø    &#216; --> Ø    &Oslash; --> Ø

capital U, grave accent              Ù    &#217; --> Ù    &Ugrave; --> Ù

capital U, acute accent              Ú    &#218; --> Ú    &Uacute; --> Ú

capital U, circumflex accent         Û    &#219; --> Û    &Ucirc;  --> Û

capital U, dieresis or umlaut mark   Ü    &#220; --> Ü    &Uuml;   --> Ü

capital Y, acute accent              Ý    &#221; --> Ý    &Yacute; --> Ý

capital THORN, Icelandic             Þ    &#222; --> Þ    &THORN;  --> Þ

small sharp s, German (sz ligature)  ß    &#223; --> ß    &szlig;  --> ß

small a, grave accent                à    &#224; --> à    &agrave; --> à

small a, acute accent                á    &#225; --> á    &aacute; --> á

small a, circumflex accent           â    &#226; --> â    &acirc;  --> â

small a, tilde                       ã    &#227; --> ã    &atilde; --> ã

small a, dieresis or umlaut mark     ä    &#228; --> ä    &auml;   --> ä

small a, ring                        å    &#229; --> å    &aring;  --> å

small ae diphthong (ligature)        æ    &#230; --> æ    &aelig;  --> æ

small c, cedilla                     ç    &#231; --> ç    &ccedil; --> ç

small e, grave accent                è    &#232; --> è    &egrave; --> è

small e, acute accent                é    &#233; --> é    &eacute; --> é

small e, circumflex accent           ê    &#234; --> ê    &ecirc;  --> ê

small e, dieresis or umlaut mark     ë    &#235; --> ë    &euml;   --> ë

small i, grave accent                ì    &#236; --> ì    &igrave; --> ì

small i, acute accent                í    &#237; --> í    &iacute; --> í

small i, circumflex accent           î    &#238; --> î    &icirc;  --> î

small i, dieresis or umlaut mark     ï    &#239; --> ï    &iuml;   --> ï

small eth, Icelandic                 ð    &#240; --> ð    &eth;    --> ð

small n, tilde                       ñ    &#241; --> ñ    &ntilde; --> ñ

small o, grave accent                ò    &#242; --> ò    &ograve; --> ò

small o, acute accent                ó    &#243; --> ó    &oacute; --> ó

small o, circumflex accent           ô    &#244; --> ô    &ocirc;  --> ô

small o, tilde                       õ    &#245; --> õ    &otilde; --> õ

small o, dieresis or umlaut mark     ö    &#246; --> ö    &ouml;   --> ö

division sign                        ÷    &#247; --> ÷    &divide; --&divide;

small o, slash                       ø    &#248; --> ø    &oslash; --> ø

small u, grave accent                ù    &#249; --> ù    &ugrave; --> ù

small u, acute accent                ú    &#250; --> ú    &uacute; --> ú

small u, circumflex accent           û    &#251; --> û    &ucirc;  --> û

small u, dieresis or umlaut mark     ü    &#252; --> ü    &uuml;   --> ü

small y, acute accent                ý    &#253; --> ý    &yacute; --> ý

small thorn, Icelandic               þ    &#254; --> þ    &thorn;  --> þ

small y, dieresis or umlaut mark     ÿ    &#255; --> ÿ    &yuml;   --> ÿ


Building Forms

Fill-out Forms - Introduction

What are forms?

World Wide Web "forms" (or "fill-out forms") are the computer equivalent of paper forms we fill out all the time in everyday life, such as an application form. You will find a button or link at the end of every WWW form, often labeled "Submit". When you push this button, two things are sent to the server: the data you've typed into the form, and an ACTION, which basically tells the server the name of the program which knows how to process that form's data. The server simply invokes that program and passes the form's data to it, and arranges for the output of that program to be sent back to the browser (ordinarily an HTML stream).

What are forms used for?

Common uses of forms are surveys, on-line order forms, feedback, or really any Web page in which input is required from the user in order to accomplish a given task or provide a service to the user.

Can I create my own forms?

Anybody who has access to an Web server for publishing HTML documents can create forms, since the form definition tags are just HTML tags. The tricky part of using forms is creating the "ACTION" defined for the form (the program which parses the encoded form data and then does something with it).

Constructing a form is far less intimidating that it may appear at first. If you've already set up web pages using HTML, then you'll move naturally into setting up forms, which are also written using HTML tags embedded right in an ordinary HTML page.

FORM tags explained...

The FORM tag specifies a fill-out form within an HTML document. More than one fill-out form can be in a single document, but forms cannot be nested.

<FORM ACTION="url"> ... </FORM>

The attributes are as follows:

ACTION is the URL of the query server to which the form contents will be submitted; if this attribute is absent, then the current document URL will be used.

METHOD is the HTTP/1.0 method used to submit the fill-out form to a query server. Which method you use depends on how your particular server works; we strongly recommend use of (or near-term migration to) POST. The valid choices are:

GET -- causes the fill-out form contents to be appended to the URL as if they were a normal query.

POST -- this method causes the fill-out form contents to be sent to the server in a data body rather than as part of the URL.

Inside a FORM you can have anything except another FORM. Specifically, INPUT, SELECT, and TEXTAREA tags are used to specify interface elements within the form.

Forms are not automatically visually differentiated from the rest of a document. We recommend using the HR (horizontal rule) tag before and after a form to cleanly differentiate it from surrounding text and/or other forms.

The INPUT Tag

The INPUT tag is used to specify a simple input element inside a FORM. It is a standalone tag; it does not surround anything and there is no terminating tag.

The attributes to INPUT are as follows:

TYPE must be one of:

1.	"text" (text entry field; this is the default)

2.	"password" (text entry field; entered characters are represented as asterisks)

3.	"checkbox" (a single toggle button; on or off)

4.	"radio" (a single toggle button; on or off; other toggles with the same NAME are

grouped into "one of many" behavior)

5.	"submit" (a push-button that causes the current form to be packaged up into a query

URL and sent to a remote server) "reset" (a push-button that causes the various input

elements in the form to be reset to their default values)

6.	NAME is the symbolic name (not a displayed name -- normal HTML within the form is

used for that) for this input field. This must be present for all types but "submit" and

"reset", as it is used when putting together the query string that gets sent to the

remote server when the filled-out form is submitted.

7.	VALUE, for a text or password entry field, can be used to specify the default contents

of the field. For a checkbox or a radio button, VALUE specifies the value of the button

when it is checked (unchecked checkboxes are disregarded when submitting queries);

the default value for a checkbox or radio button is "on". For types "submit" and

"reset", VALUE can be used to specify the label for the push-button.

8.	CHECKED (no value needed) specifies that this checkbox or radio button is checked

by default; this is only appropriate for checkboxes and radio buttons.

9.	SIZE is the physical size of the input field in characters; this is only appropriate for

text entry fields and password entry fields. If this is not present, the default is 20.

Multiline text entry fields can be specified as SIZE=width,height; e.g. SIZE=60,12.

Note: the SIZE attribute should not be used to specify multiline text entry fields now

that the TEXTAREA tag is available. (see below)

10.	MAXLENGTH is the maximum number of characters that are accepted as input; this

is only appropriate for text entry fields and password entry fields (and only for single-

line text entry fields at that). If this is not present, the default will be unlimited. The

text entry field will scroll appropriately if MAXLENGTH is greater than SIZE.

The SELECT Tag

Inside <FORM> ... </FORM>, any number of SELECT tags are allowed, freely intermixed with other HTML elements (including INPUT and TEXTAREA elements) and text (but not additional forms).

Unlike INPUT, SELECT has both opening and closing tags. Inside SELECT, only a sequence of OPTION tags -- each followed by an arbitrary amount of plain text (no HTML markup) -- is allowed; for example:

<SELECT NAME="a-menu">

<OPTION> First option.

<OPTION> Second option.

</SELECT>

The attributes to SELECT are as follows:

NAME is the symbolic name for this SELECT element. This must be present, as it is used when putting together the query string for the submitted form.

SIZE: if SIZE is 1 or if the SIZE attribute is missing, by default the SELECT will be represented as a Motif option menu. If SIZE is 2 or more, the SELECT will be represented as a Motif scrolled list; the value of SIZE then determines how many items will be visible.

MULTIPLE, if present (no value), specifies that the SELECT should allow multiple selections (n of many behavior). The presence of MULTIPLE forces the SELECT to be represented as a Motif scrolled list, regardless of the value of SIZE.

The attributes to OPTION are as follows:

SELECTED specifies that this option is selected by default. If the SELECT allows multiple selections (via the MULTIPLE attribute), multiple options can be specified as SELECTED.

The TEXTAREA Tag

The TEXTAREA tag can be used to place a multiline text entry field with optional default contents in a fill-out form. The attributes to TEXTAREA are as follows:

NAME is the symbolic name of the text entry field.

ROWS is the number of rows (vertical height in characters) of the text entry field.

COLS is the number of columns (horizontal width in characters) of the text entry field.

TEXTAREA fields automatically have scrollbars; any amount of text can be entered in them.

The TEXTAREA element requires both an opening and a closing tag. A TEXTAREA with no default contents looks like this:

<TEXTAREA NAME="foo" ROWS=4 COLS=40></TEXTAREA>

A TEXTAREA with default contents looks like this:

<TEXTAREA NAME="foo" ROWS=4 COLS=40>

Default contents go here.

</TEXTAREA>

The default contents must be straight ASCII text. Newlines are respected (so in the above example there will be a newline both before and after "Default contents go here.").

Form Submission...

For Method = GET

When the submit button is pressed, the contents of the form will be assembled into a query URL that looks like this:

action?name=value&name=value&name=value

("action" here is the URL specified by the ACTION attribute to the FORM tag, or the current document URL if no ACTION attribute was specified.)

Strange characters in any of the "name" or "value" instances will be escaped as usual; this includes "=" and "&". Note: This means that instances of "=" that separate names and values, and instances of "&" that separate name/value pairs, are not escaped.

For text and password entry fields, whatever the user typed in will be the value; if the user didn't type anything, the value will be empty but the "name=" part of the query string will still be present.

For checkboxes and radio buttons, the VALUE attribute specifies the value of a checkbox or radio button when it is checked. An unchecked checkbox is disregarded completely when assembling the query string. Multiple checkboxes can have the same NAME (and different VALUEs), if desired. Multiple radio buttons intended to have "one of many" behavior should have the same NAME and different VALUEs.

For Method = POST

The contents of the form are encoded exactly as with the GET method (above), but rather than appending them to the URL specified by the form's ACTION attribute as a query, the contents are sent in a data block as part of the POST operation. The ACTION attribute (if any) is the URL to which the data block is POSTed.

The default setting in <Live Markup> is POST.

Building Forms with <Live Markup>

INPUT Text element .

Follow these instructions exactly, or it will not work.

TEXT INPUT FIELD... Used for Name, Address, basic single line text input.

To start a new Form click on the INSERT A NEW FORM button in the toolbar, or select from the pulldown menu INSERT|FORM -- a new form element inserts in the document, then...

1.	Click on textblock in toolbar. Type any wanted text, or leave it blank.

2.	From the pulldown menu, select INSERT | FORM WIDGET | INPUT

3.	A new Text INPUT Field is inserted with the 20 character default value.

4.	Double click anywhere within the INPUT field, the Property Sheet INPUT ELEMENT

PROPERTIES menu opens.

5.	In the Input Type selections click on TEXT.

6.	Now, click on the Text tab of the Property Sheet -- it opens.

7.	In the NAME Window type -- any Name it is a symbolic name (not a displayed name)

This symbolic name must be present for all types, it is used when putting together the

query string that gets sent to the remote server when the filled-out form is submitted.

8.	In the VALUE window type only something if you want to display it directly in the input

field of the form in the HTML document.

9.	SIZE is the physical size of the input field in characters; this is only appropriate for

text entry fields and password entry fields. If this is not present, the default is 20.

MAXIMUM CHARACTERS -- use the default, do not enter anything.

Continue with 13 below, if you go with the default POST method.

10.	OTHER ATTRIBUTES -- any other attribute you want.

11.	Click on the FORM tab -- if you want to change the default POST value to GET -- and

change it, by clicking on the get radio field.

12.	In the ENCTYPE field type the proper attribute. At this time we support the POST

attribute with automatic input.

13.	Click on the Action URL tab.

a)	if you are running your own server, type in the  PATH the proper cgi path.

b)	if you are renting space on a server type the proper URL. Under PROTOCOL

select HTTP, then type the DOMAIN NAME in the HOST field, and the CGI

bin location in the PATH. See building URLs.

14.	Click OK, then press the ENTER key (except if you want text after the Form

element -- type your text, then press the ENTER key.) Anytime you press the Enter

key, a RETURN ARROW is visible.

Double clicking directly on the RETURN ARROW brings up the End of Line Property Sheet for different attribute selection -- default is NONE.

To continue with the form, adding other elements, read the next chapter -- Adding/Editing other Form elements...

REMEMBER: Anytime you want to delete any form input box, place the cursor behind the box, then press the backspace key.

Adding/Editing Form elements...

To add to a existing Form

a.	From the pulldown menu, select INSERT | FORM WIDGET | INPUT for a TEXT input

field, PASSWORD input field, HIDDEN text field, CHECKBOX field, RADIO field,

IMAGE field, SUBMIT or RESET field button.

1.	From the pulldown menu, select INSERT | FORM WIDGET | TextArea for a

text are field.

2.	From the pulldown menu, select INSERT | FORM WIDGET | Select for a

Select field (for multiple selections)

b.	The selected field is inserted. Double click anywhere within the NEW field, the

corresponding Property menu opens for your input.

c.	Click OK, then press the ENTER key (except if you want text after the Form

element -- type your text, then press the ENTER key.) Anytime you press the Enter

key, a RETURN ARROW is visible.

d.	Now continue with a above for additional Form inputs.

At any time you want to close the Form -- simply select a new text block from the toolbar, or a horizontal line for example.

The TEXTAREA element...

The follow instructions explain the textarea element...

TEXTAREA... fields automatically have scrollbars; any amount of text can be entered in them

To start a new Form click on the INSERT A NEW FORM button in the toolbar, or select from the pulldown menu INSERT|FORM -- a new form element inserts in the document, then...

1.	Click on textblock in toolbar. Type any wanted text...

2.	From the pulldown menu, select INSERT | FORM WIDGET | TEXT AREA

3.	A new Text Area Field is inserted with scrollbars.

4.	Double click anywhere within the Text Area Field, the Property Sheet TEXT AREA

PROPERTIES menu opens.

5.	In the Text Area Data tab menu under NAME type -- any Name it is a symbolic

name (not a displayed name) This symbolic name must be present for all types, it is

used when putting together the query string that gets sent to the remote server when

the filled-out form is submitted.

6.	COLUMNS and ROWS -- the default size is 20 characters by 1 row. Inserting

numbers in the Column or Row window changes the Text Area box accordingly.

ROWS is the number of rows (vertical height in characters) of the text entry field.

COLS is the number of columns (horizontal width in characters) of the text entry field.

7.	Initial Text -- Any text entered will be displayed in the actual Form. Suggest to leave it

empty -- default. Now click OK.

How to make a CHECKBOX...

The follow instructions explain the checkbox element...

CHECKBOX... only two choices are available ON or OFF (checked or not checked)

To start a new Form click on the INSERT A NEW FORM button in the toolbar, or select from the pulldown menu INSERT|FORM -- a new form element inserts in the document, then...

1.	Click on textblock in toolbar. Type any wanted text, or leave it blank.

2.	From the pulldown menu, select INSERT | FORM WIDGET | INPUT

3.	A new Text INPUT Field is inserted with the 20 character default value.

4.	Double click anywhere within the INPUT field, the Property Sheet INPUT ELEMENT

PROPERTIES menu opens.

5.	In the Input Type selections click on CHECKBOX.

6.	Now, click on the CHECKBOX. tab of the Property Sheet -- it opens.

7.	In the NAME Window type -- any Name it is a symbolic name (not a displayed name)

8.	Under CHECKED you have two choices:

a)	leave it in the <Live Markup> default position UNCHECKED (off), meaning,

there will be NO check mark (usually an X) in the document viewed with

a Web browser.

b)	change it to CHECKED (on) -- in the final document viewed with a Web

browser will be a check mark usually an X.

9.	Click OK, then press the ENTER key (except if you want text after the Form

element -- type your text, then press the ENTER key.) Anytime you press the Enter

key, a RETURN ARROW is visible.

How to make a Radio button...

The follow instructions explain the Radio button element...

RADIO... only two choices are available ON or OFF (checked or not checked)

To start a new Form click on the INSERT A NEW FORM button in the toolbar, or select from the pulldown menu INSERT|FORM -- a new form element inserts in the document, then...

1.	Click on textblock in toolbar. Type any wanted text, or leave it blank.

2.	From the pulldown menu, select INSERT | FORM WIDGET | INPUT

3.	A new Text INPUT Field is inserted with the 20 character default value.

4.	Double click anywhere within the INPUT field, the Property Sheet INPUT ELEMENT

PROPERTIES menu opens.

5.	In the Input Type selections click on RADIO.

6.	Now, click on the RADIO. tab of the Property Sheet -- it opens.

7.	In the NAME Window type -- any Name it is a symbolic name (not a displayed name)

8.	Under CHECKED you have two choices:

a)	leave it in the <Live Markup> default position UNCHECKED (off), meaning,

there will be NO check mark (usually black dot) in the document viewed with

a Web browser.

b)	change it to CHECKED (on) -- in the final document viewed with a Web

browser will be a check mark usually a black dot.

9.	Click OK, then press the ENTER key (except if you want text after the Form

element -- type your text, then press the ENTER key.) Anytime you press the Enter

key, a RETURN ARROW is visible.

How to make a SELECT Form...

The follow instructions explain the SELECT element...

SELECT... a Form to select one or more items from a scrolling list.

To start a new Form click on the INSERT A NEW FORM button in the toolbar, or select from the pulldown menu INSERT|FORM -- a new form element inserts in the document, then...

1.	Click on textblock in toolbar. Type any wanted text, or leave it blank.

2.	From the pulldown menu, select INSERT | FORM WIDGET | ISELECT

3.	A new Select Form Field is inserted with the 2 character default value, it will

automatically increase in size depending on the typed form selection.

4.	Double click anywhere within the SELECT field, the SELECT

PROPERTIES Sheet opens.

5.	Under the SELECT DATA tab, type the name in the NAME field.

6.	SIZE -- leave it blank. When SIZE is used, the selection is rendered as a scrolling list

in graphical browsers, with the number of elements in the SIZE attribute visible on the

form itself.

ADD NEW OPTIONS...

7.	Now lets ADD different user selectable Option: Click on ADD OPTION tab.

a.	in the ADD NEW OPTION AT field, type: 1

b.	in the NAME field, type: blond (example), then click on the ADD button.

Open the Property Sheet again -- click on ADD OPTION again, then...

c.	in the ADD NEW OPTION AT field, type: 2

d.	in the NAME field, type: red (example), then click on the ADD button.

Open the Property Sheet again -- click on ADD OPTION again, then...

e.	in the ADD NEW OPTION AT field, type: 3

f.	in the NAME field, type: black (example), then click on the ADD button.

Now look at the Property Sheet -- NEW tabs have been added: blond, red, black.

Add as many options as you need for your form.

ADD/EDIT OPTIONS...

A.	Click on the ADD OPTION tab. The Property Sheet shows how many  Options

are within this select tag. Continuing with the above example, it would say:

There are  3  options in this select widget. (blond, red, black).

Even if you have 25 options in this widget you could scroll to every one of them for editing.

B.	VALID POSITIONS ARE BETWEEN 1 and 4. Telling you, at which positions can be

added to, or inserted between.

C.	ADD OPTIONS AT: 4 If you want to add another Option at the end.

DELETE OPTIONS...

A.	Click on the DELETE OPTION tab. The Property Sheet shows how many  Options

are within this select tag. Continuing with the above example, it would say:

There are  3  options in this select widget. (blond, red, black).

Even if you have 25 options in this widget you could scroll to every one of them for editing.

B.	VALID POSITIONS ARE BETWEEN 1 and 4. Telling you, which positions can be

deleted.

C.	DELETE OPTIONS AT: 3 (in this example, you deleted black.)

Remember: Within any Form it is only necessary to type the URL in ONE FORM WIDGET, after saving the file the same URL will be placed in all the other widgets Property Sheet -- within the <form> same Form </form>.

How to make SUBMIT or RESET button.

Follow these instructions exactly, or it will not work.

SUBMIT BUTTON..."submit" (a push-button that causes the current form to be packaged up into a query URL and sent to a remote server)

1.	Click on textblock in toolbar. Type any wanted text...

2.	From the pulldown menu, select INSERT | FORM WIDGET | INPUT

3.	The Property Sheet INPUT ELEMENT PROPERTIES menu opens.

4.	In the Input Type selections click on SUBMIT.

5.	Now, click on the Submit tab of the Property Sheet -- it opens.

6.	In the NAME window type -- any Name it is a symbolic name (not a displayed name)

7.	In the VALUE window type Submit or any other wording. Then click OK and the

Submit Button is created automatically.

RESET BUTTON..."reset" (a push-button that causes the various input elements in the form to be reset to their default values)

1.	Click on textblock in toolbar. Type any wanted text...

2.	From the pulldown menu, select INSERT | FORM WIDGET | INPUT

3.	The Property Sheet INPUT ELEMENT PROPERTIES menu opens.

4.	In the Input Type selections click on RESET.

5.	Now, click on the Reset tab of the Property Sheet -- it opens.

6.	In the NAME window type -- any Name it is a symbolic name (not a displayed name)

7.	In the VALUE window type Reset or any other wording. Then click OK and the

Reset Button is created automatically.

HIDDEN Field .

Follow these instructions exactly, or it will not work.

HIDDEN FIELD... Hidden elements make sense, if you want to generate a form from a form.

To start a new Form click on the INSERT A NEW FORM button in the toolbar, or select from the pulldown menu INSERT|FORM -- a new form element inserts in the document, then...

1.	Click on textblock in toolbar. Type any wanted text, or leave it blank.

2.	From the pulldown menu, select INSERT | FORM WIDGET | INPUT

3.	A new Text INPUT Field is inserted with the 20 character default value.

4.	Double click anywhere within the INPUT field, the Property Sheet INPUT ELEMENT

PROPERTIES menu opens.

5.	In the Input Type selections click on HIDDEN.

6.	Now, click on the HIDDEN tab of the Property Sheet -- it opens.

7.	In the NAME Window type -- any Name it is a symbolic name (not a displayed name)

8.	In the VALUE window type ...

9.	SIZE is the physical size of the input field in characters. If this is not present, the

default is 20.

MAXIMUM CHARACTERS -- use the default, do not enter anything.

10.	Click on the FORM tab ONLY -- if you want to change the default POST value to

GET -- and change it, by clicking on the get radio field.

11.	Click on the Action URL tab.

HIDDEN fields do NOT appear on the actual form; they are invisible in the browser display. However, anybody looking at your HTML code can see the hidden input information.

WHY HIDDEN FIELDS? Lets assume you create a simple form. In the script that processes the first form, you create a second form based on the input from the first form. The script to process the second form takes the information from both the first and second form and creates a reply based on that information.

To bring the whole FORM element in FOCUS, click on top of the first Form element. Forms have a leading and trailing space.

We suggest to print this help section, if you are building forms.


Working with Tables

NETSCAPE 1.1 TABLES & THE PROPOSED HTML3.0 SPEC

The HTML table model has been chosen for its simplicity and flexibility. By default the table is automatically sized according to the cell contents and the current window size. The COLSPEC attribute can be used when needed to exert control over column widths.

Table start with an optional caption followed one or more rows. Each row is formed by one or more cells, which are differentiated into header and data cells. Cells can be merged across rows and columns, and include attributes assisting rendering to speech and braille, or for exporting table data into databases.

Tables can contain a wide range of content, such as headers, lists, paragraphs, forms, figures, preformatted text and even nested tables.

THE TABLE TAGS

<TABLE ...></TABLE>

These are the main TABLE tags surrounding all the other table tags. By default tables have no borders, borders will be added if the BORDER attribute is specified.

<TR ...></TR>

TABLE ROW. The number of rows in a table is exactly specified by how many TR tags are contained within it. TR can have both the ALIGN and VALIGN attributes, which if specified become the default alignments for all cells in this row.

<TD ...></TD>

TABLE DATA. Specifies a standard table data cell. Table data cells must only appear within table rows. The default alignment of table data is ALIGN=left and VALIGN=middle. These alignments are overridden by any alignments specified in the containing TR tag, and those alignments in turn are overridden by any ALIGN or VALIGN attributes explicitly specified on this cell.

<TH ...></TH>

TABLE HEADER. Header cells are identical to data cells in all respects, with the exception that header cells are in a bold FONT, and have a default ALIGN=center.

<CAPTION ...></CAPTION>

CAPTION for a Table. CAPTION tags should appear inside the TABLE but not inside table rows or cells. The caption accepts an alignment attribute that defaults to ALIGN=top but can be explicitly set to ALIGN=bottom.

THE TABLE ATTRIBUTES

BORDER

This attribute appears in the TABLE tag. If present, borders are drawn around all table cells. If absent, there are no borders, but by default space is left for borders, so the same table with and without the BORDER attribute will have the same width.

ALIGN

If appearing inside a CAPTION it controls whether the caption appears above or below the table, and can have the values top or bottom, defaulting to top.

If appearing inside a TR, TH, or TD it controls whether text inside the table cell(s) is aligned to the left side of the cell, the right side of the cell, or centered within the cell. Values are left, center, and right.

VALIGN

Appearing inside a TR, TH, or TD it controls whether text inside the table cell(s) is aligned to the top of the cell, the bottom of the cell, or vertically centered within the cell. It can also specify that all the cells in the row should be vertically aligned to the same baseline. Values are top, middle bottom, and baseline.

NOWRAP

If this attribute appears in any table cell (TH or TD) it means the lines within this cell cannot be broken to fit the width of the cell. Be cautious in use of this attribute as it can result in excessively wide cells.

COLSPAN

This attribute can appear in any table cell (TH or TD) and it specifies how many columns of the table this cell should span. The default COLSPAN for any cell is 1.

ROWSPAN

This attribute can appear in any table cell (TH or TD) and it specifies how many rows of the table this cell should span. The default ROWSPAN for any cell is 1. A span that extends into rows that were never specified with a TR will be truncated.

Additional Netscape Table Attributes...

Netscapes explanation: We found when creating tables that the creator inevitably wanted a little more control, especially when creating complex multiply nested tables. To this end we added a few more attributes that we are hoping to get into The continually evolving proposed HTML 3.0 spec.

BORDER=<value>

By allowing the BORDER attribute to take a value, the document author gains two things. First they gain the ability emphasize some tables with respect to others, a table with a border of four containing a sub-table with a border of one looks much nicer than if they both share the same default border width. Second, by explicitly setting border to zero they regain that space originally reserved for borders between cells, allowing particularly compact tables.

CELLSPACING=<value> This is a new attribute for the TABLE tag. By default Netscape 1.1 uses a cell spacing of two. For those fussy about the look of their tables, this gives them a little more control. Like it sounds, cell spacing is the amount of space inserted between individual cells in a table.

CELLPADDING=<value> This is a new attribute for the TABLE tag. By default Netscape 1.1 uses a cell padding of one. Cell padding is the amount of space between the border of the cell and the contents of the cell. Setting a cell padding of zero on a table with borders might look bad because the edges of the text could touch the cell borders.

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>

 gives the most compact table possible.

WIDTH=<value_or_percent>

When this attribute appears on the TABLE tag it is used to describe the desired width of this table, either as an absolute width in pixels, or a percentage of document width. Ordinarily complex heuristics are applied to tables and their cells to attempt to present a pleasing looking table. Setting the WIDTH attribute overrides those heuristics and instead effort is put into fitting the table into the desired width as specified. In some cases it might be impossible to fit all the table cells at the specified width, in which case Netscape 1.1 will try and get as close as possible.

When this attribute appears on either the TH or TD tag it is used to describe the desired width of the cell, either as an absolute width in pixels, or a percentage of table width. Ordinarily complex heuristics are applied to table cells to attempt to present a pleasing looking table. Setting the WIDTH attribute overrides those heuristics for that cell and instead effort is put into fitting the cell into the desired width as specified. In some cases it might be impossible to fit all the table cells at the specified widths, in which case Netscape 1.1 will try and get as close as possible.

STUFF AND BOTHER (THE DETAILS)

Blank cells which contain no displayable elements are not given borders. If you wish the appearance of an empty cell, but with borders, put either a blank line or a non-breaking space in the cell. (<td>&nbsp;</td> or <td><br></td>)

The proposed HTML 3.0 spec. allows you to abuse row and column spans to create tables whose cells must overlap. Don't do this, it looks awful.

You will eventually create a cell containing nothing but an image, and you will wonder why your image is not properly centered inside the cell. You probably wrote HTML like:

<td>

<img src="url">

</td>

That extra whitespace inside your cell and around your image gets collapsed into single space characters. And it is these spaces (whose baselines by default align with the bottom of the image) which are making your cell look lopsided. Try this instead:

<td><img src="url"></td>

Working with Tables in <Live Markup>PRO

Release B22 is the first release for Table building. Many already created Tables may not load properly -- due to open tags etc., or may not display like Netscape does. We are working on the display algorithm, new releases will be placed on the server as we go along in this process during the next few weeks.

IMPORTANT: We have a INI software switch to turn all Table functions OFF. Use it, if you need to work on a document (with tables in it), which does not load. Here is how:

Open the LVMK.INI file in your Live Markup directory. Under the [Preferences] heading at the end of this section you find -- *Parse Tables=1* set it to *Parse Tables=0* (zero), save the INI file, then open <Live Markup>PRO all Table functions are now disabled -- they will display in RAW text elements.

Inserting a NEW Table in <Live Markup>PRO:

1.	Select INSERT|TABLE from the pulldown menu, or click on the Table

button in the toolbar.

2.	The New Table Property Menu opens.

3.	Change the settings to your needs.

4.	Then click OK and the table cells are populated with plain TEXT

elements.

5.	Select the first table cell by clicking in it.

All the Table attributes and its use are described in the this Help file above -- suggest to Print this whole section..

Deleting a Table Row:

Click on the bottom part of a table cell once, until you see at the bottom of the page *Current element: TABLE ROW* -- now key SHIFT+CNTRL+DEL, this will delete the whole Table ROW.

(This selecting is kind of touchy now, it goes from TEXTBLOCK (assuming you did not insert

a image etc.) to TABLE DATUM to TABLE ROW to TABLE within a few pixels.

Always check the ELEMENT ATTRIBUTE DISPLAY at the bottom of the page --to see what mode you are in.

Deleting a Table Cell:

Click on the bottom part of a table cell once, until you see at the bottom of the page *Current element: TABLE DATUM* -- now key SHIFT+CNTRL+DEL, this will delete the whole Table CELL.

Navigating within a table (this is being changed -- very soon) CTRL+Arrow to move from Table to Table Rows to Table Datum to Table Header. Press ALT + ENTER edit Attributes.

Presently check the actual Table display in Netscape quite often, as you build Tables. Our Table rendering is not yet always comparable to Netscapes, but will be much better already next week -- we have to start somewhere.

Adding a CAPTION to a Table:

A caption may be added to the Table by selecting the Table (current element: TABLE), then select INSERT|TABLE CAPTION or click on the "insert a table caption" button. Basically a text block is inserted at the top of the table by default. The position may be changed by selecting CTRL+Left ARROW, then ALT+ENTER, this opens the Captions Property Menu -- Select BOTTOM, OK, the Table Caption moves to the bottom of the table.

HINT: Netscape treats Captions as a body level container -- so does Live Markup. It is not proper HTML but you can insert a list in a Caption or image for example.

What we are working on next:

---------------------------------------

1.	Simple Navigation within a Table. The present navigation it is

only a temporally work-around.

2.	Inserting new rows and columns to a existing table.

3.	Closer Netscape like display.